/* Frequenz-Generator (/frequenzen/). Loaded after /style.css.
   A black night sky with one breathing gold ring: the language of the frequency ritual videos.
   Gold #e9b866 on black, Literata for the voice, IBM Plex Mono for numbers. Shop tokens (--ink …) stay untouched:
   the shop footer below still uses them. */

@font-face { font-family: "Literata Display"; src: url(/fonts/literata-display-500.woff2) format("woff2"); font-weight: 500; font-display: swap; }

body.fq {
  --fq-bg: #000;
  --fq-bg-2: #0b0a08;
  --fq-ink: #f4efe6;
  --fq-ink-2: #b9b3a8;            /* 9.6:1 on black */
  --fq-gold: #e9b866;
  --fq-gold-dim: rgba(233, 184, 102, .5);
  --fq-line: rgba(233, 184, 102, .2);
  --fq-line-2: rgba(244, 239, 230, .24);
  --fq-serif: "Literata Display", "Literata", Georgia, "Times New Roman", serif;
  background: var(--fq-bg);
  color: var(--fq-ink);
  color-scheme: dark;
}
body.fq :focus-visible { outline: 2px solid var(--fq-ink); outline-offset: 3px; box-shadow: 0 0 0 6px rgba(233, 184, 102, .5); border-radius: 3px; }
body.fq .skip { background: var(--fq-gold); color: #000; }
body.fq .foot { margin-top: 0; border-top: 1px solid var(--fq-line); }

/* ---- masthead ---- */
.fq-mast { border-bottom: 1px solid var(--fq-line); }
.fq-mast-in { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: .4rem 1.2rem; padding-top: .9rem; padding-bottom: .9rem; }
.fq-logo { display: inline-flex; align-items: center; gap: .55rem; min-height: 44px; text-decoration: none; color: var(--fq-gold);
  font: 600 1rem/1 var(--mono); letter-spacing: .32em; text-shadow: 0 0 18px rgba(233, 184, 102, .45); }
.fq-logo i { width: .8rem; height: .8rem; border: 1.5px solid currentColor; border-radius: 50%; box-shadow: 0 0 10px rgba(233, 184, 102, .7); }
.fq-from { display: inline-flex; align-items: center; min-height: 44px; font-size: .92rem; color: var(--fq-ink-2); text-decoration: none; }
.fq-from b { color: var(--fq-ink); font-weight: 700; margin-left: .3em; }
.fq-from:hover b { text-decoration: underline; text-underline-offset: .2em; }

/* ---- head ---- */
.fq-head { padding-top: clamp(1rem, 3vw, 1.8rem); }
.fq-head .crumbs { color: var(--fq-ink-2); }
.fq-eyebrow { font: 600 .74rem/1.4 var(--mono); letter-spacing: .16em; text-transform: uppercase; color: var(--fq-gold); margin: 1.5rem 0 .8rem; }
body.fq h1, body.fq h2, body.fq h3 { font-family: var(--fq-serif); font-weight: 500; font-stretch: 100%; text-transform: none; letter-spacing: -.01em; }
.fq-h1 { font-size: clamp(2rem, 5.4vw, 3.5rem); line-height: 1.08; max-width: 21ch; text-wrap: balance; overflow-wrap: break-word; hyphens: auto; }
.fq-lede { font-size: clamp(1.05rem, 2vw, 1.2rem); line-height: 1.6; color: var(--fq-ink-2); max-width: 40rem; margin: 1rem 0 0; }

/* ---- tool ---- */
.fq-tool { display: grid; grid-template-columns: minmax(0, 1fr); gap: 1.8rem; padding-top: clamp(1.4rem, 4vw, 2.6rem); padding-bottom: clamp(2.4rem, 6vw, 4rem); }
@media (min-width: 960px) {
  .fq-tool { grid-template-columns: minmax(0, 1fr) minmax(0, 27rem); gap: 3.2rem; align-items: start; }
  .fq-stage { position: sticky; top: 1rem; }
}
.fq-stage { min-width: 0; }
.fq-visual { position: relative; width: 100%; max-width: 34rem; margin: 0 auto; aspect-ratio: 1 / 1; overflow: hidden; border-radius: 6px;
  box-shadow: 0 0 0 1px var(--fq-line), 0 30px 80px -40px rgba(233, 184, 102, .35); }
.fq-visual canvas { position: absolute; inset: 0; width: 100%; height: 100%; display: block; }
.fq-readout { position: absolute; left: 0; right: 0; bottom: 6%; padding: 0 1rem; text-align: center; pointer-events: none; }
.fq-big { margin: 0; font: 600 clamp(1.7rem, 7vw, 2.4rem)/1 var(--mono); letter-spacing: .06em; color: var(--fq-gold); text-shadow: 0 0 22px rgba(233, 184, 102, .5); font-variant-numeric: tabular-nums; }
.fq-big small { font-size: .55em; letter-spacing: .14em; margin-left: .25em; }
.fq-status { margin: .55rem 0 0; font: 400 .7rem/1.4 var(--mono); letter-spacing: .18em; text-transform: uppercase; color: rgba(244, 239, 230, .7); }
.fq-sub { margin: .25rem 0 0; min-height: 1.4em; font: 400 .7rem/1.4 var(--mono); letter-spacing: .12em; color: rgba(233, 184, 102, .75); }

.fq-play { display: flex; align-items: center; justify-content: center; gap: .65rem; min-height: 3.5rem; min-width: 14rem; margin: 1.3rem auto 0; padding: .9rem 2rem;
  border: 1.5px solid var(--fq-gold); border-radius: 999px; background: var(--fq-gold); color: #000; font-weight: 700; font-size: 1.1rem; letter-spacing: .01em;
  cursor: pointer; box-shadow: 0 0 34px -8px rgba(233, 184, 102, .75); transition: background .2s ease, color .2s ease, box-shadow .2s ease; }
.fq-play:hover { box-shadow: 0 0 44px -6px rgba(233, 184, 102, .9); }
.fq-play[disabled] { opacity: .45; cursor: not-allowed; box-shadow: none; }
.fq-play svg { width: 1.15rem; height: 1.15rem; flex: none; fill: currentColor; }
.fq-play .i-stop, .fq-play[data-on] .i-play { display: none; }
.fq-play[data-on] .i-stop { display: block; }
.fq-play[data-on] { background: transparent; color: var(--fq-gold); }
.fq-hint { font-size: .86rem; line-height: 1.5; color: var(--fq-ink-2); margin: .45rem 0 0; }
.fq-stage .fq-breath { margin-top: .9rem; }
.fq-stage .fq-hint { text-align: center; }
.fq-esc { display: none; }
@media (hover: hover) and (pointer: fine) { .fq-esc { display: block; } }
@media (prefers-reduced-motion: reduce) { .fq-breath { display: none; } }

.fq-notice { max-width: 34rem; margin: 1.3rem auto 0; padding: .85rem 1rem; border-left: 2px solid var(--fq-gold); background: rgba(233, 184, 102, .07);
  font-size: .92rem; line-height: 1.55; }
.fq-notice p { margin: 0; }

.fq-panel { min-width: 0; background: var(--fq-bg-2); border: 1px solid var(--fq-line); border-radius: 6px; padding: clamp(1rem, 4vw, 1.6rem); }
.fq-group { border: 0; padding: 0; margin: 0 0 1.7rem; min-width: 0; }
.fq-group:last-child { margin-bottom: 0; }
.fq-group legend, .fq-label { display: block; padding: 0; margin: 0 0 .7rem; font: 600 .74rem/1.3 var(--mono); letter-spacing: .14em; text-transform: uppercase; color: var(--fq-ink-2); }
.fq-presets { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: .45rem; }
.fq-preset { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: .15rem; min-height: 3.9rem; padding: .3rem 0;
  border: 1px solid var(--fq-line-2); border-radius: 4px; background: transparent; color: var(--fq-ink); font: 600 1rem/1 var(--mono); cursor: pointer;
  font-variant-numeric: tabular-nums; transition: border-color .15s ease, background .15s ease; }
.fq-preset small { font-size: .62rem; letter-spacing: .12em; color: var(--fq-ink-2); }
.fq-preset em { font-family: var(--fq-serif); font-style: italic; font-weight: 400; font-size: .58rem; line-height: 1.1; color: var(--fq-gold); white-space: nowrap; }
@media (min-width: 900px) { .fq-preset em { font-size: .66rem; } }
.fq-preset[aria-pressed="true"] em, .fq-preset[aria-pressed="true"] small { color: #000; }
.fq-preset:hover { border-color: var(--fq-gold); }
.fq-preset[aria-pressed="true"] { background: var(--fq-gold); border-color: var(--fq-gold); color: #000; box-shadow: 0 0 18px -4px rgba(233, 184, 102, .8); }
.fq-preset[aria-pressed="true"] small { color: rgba(0, 0, 0, .72); }
.fq-info { min-height: 4.3em; margin: .8rem 0 1.1rem; font-size: .92rem; line-height: 1.55; color: var(--fq-ink); }
.fq-hzrow { display: flex; align-items: stretch; gap: .45rem; }
.fq-hzrow input { width: 8.5rem; min-width: 0; min-height: 3rem; padding: .55rem .8rem; border: 1px solid var(--fq-line-2); border-radius: 4px; background: #000; color: var(--fq-ink);
  font: 600 1.15rem var(--mono); font-variant-numeric: tabular-nums; }
.fq-hzrow input[aria-invalid="true"] { border-color: #ff8a7a; box-shadow: inset 3px 0 0 #ff8a7a; }
.fq-hzrow .fq-unit { align-self: center; font: 600 .9rem var(--mono); color: var(--fq-ink-2); margin-right: .4rem; }
.fq-step { min-width: 3rem; min-height: 3rem; border: 1px solid var(--fq-line-2); border-radius: 4px; background: transparent; color: var(--fq-ink); font: 600 1.15rem var(--mono); cursor: pointer; }
.fq-step:hover { border-color: var(--fq-gold); }
.fq-note { margin: .5rem 0 0; font: 400 .8rem/1.4 var(--mono); color: var(--fq-ink-2); }
.fq-err { margin: .45rem 0 0; font-size: .88rem; font-weight: 600; color: #ff8a7a; }

.fq-modes label { display: flex; gap: .75rem; align-items: flex-start; padding: .75rem .9rem; margin-bottom: .45rem; border: 1px solid var(--fq-line-2); border-radius: 4px; cursor: pointer; }
.fq-modes label:hover { border-color: var(--fq-gold-dim); }
.fq-modes label:has(input:checked) { border-color: var(--fq-gold); background: rgba(233, 184, 102, .08); }
.fq-modes input { width: 1.15rem; height: 1.15rem; margin: .2rem 0 0; flex: none; accent-color: var(--fq-gold); }
.fq-modes b { display: block; font-weight: 700; }
.fq-modes small { display: block; font-size: .86rem; line-height: 1.45; color: var(--fq-ink-2); }
.fq-phones { margin: .7rem 0 0; padding: .7rem .9rem; border: 1px dashed var(--fq-gold); border-radius: 4px; font-size: .9rem; line-height: 1.5; }
.fq-phones b { color: var(--fq-gold); }

.fq-row { display: flex; justify-content: space-between; align-items: baseline; gap: 1rem; }
.fq-row .fq-label { margin-bottom: .2rem; }
.fq-row output { font: 600 .95rem var(--mono); color: var(--fq-gold); font-variant-numeric: tabular-nums; }
.fq-range { display: block; width: 100%; height: 2.75rem; margin: 0; accent-color: var(--fq-gold); cursor: pointer; background: transparent; }
.fq-range:disabled { cursor: not-allowed; }
.is-off { opacity: .5; }

.fq-chips { display: flex; flex-wrap: wrap; gap: .45rem; }
.fq-chip { position: relative; }
.fq-chip input { position: absolute; opacity: 0; width: 1px; height: 1px; }
.fq-chip span { display: inline-flex; align-items: center; justify-content: center; min-width: 3.4rem; min-height: 2.75rem; padding: 0 .8rem; border: 1px solid var(--fq-line-2);
  border-radius: 999px; font: 600 .85rem var(--mono); cursor: pointer; }
.fq-chip span:hover { border-color: var(--fq-gold); }
.fq-chip input:checked + span { background: var(--fq-gold); border-color: var(--fq-gold); color: #000; }
.fq-chip input:focus-visible + span { outline: 2px solid var(--fq-ink); outline-offset: 3px; box-shadow: 0 0 0 6px rgba(233, 184, 102, .5); }

/* ---- text ---- */
.fq-text { max-width: 46rem; padding-bottom: 1rem; }
.fq-text h2 { font-size: clamp(1.65rem, 4.4vw, 2.4rem); line-height: 1.12; margin: 3rem 0 1rem; text-wrap: balance; }
.fq-text h2:first-child { margin-top: 0; }
.fq-text p, .fq-text li { font-size: 1.04rem; line-height: 1.72; color: rgba(244, 239, 230, .86); }
.fq-text a { color: var(--fq-gold); text-decoration-thickness: 1px; }
.fq-text a:hover { text-decoration-thickness: 2px; }
.fq-text strong { color: var(--fq-ink); font-weight: 700; }
.fq-steps { list-style: none; counter-reset: s; margin: 0 0 1.2rem; }
.fq-steps li { counter-increment: s; position: relative; padding: 0 0 .9rem 2.6rem; }
.fq-steps li::before { content: counter(s, decimal-leading-zero); position: absolute; left: 0; top: .2em; font: 600 .8rem/1.6 var(--mono); color: var(--fq-gold); letter-spacing: .06em; }
.fq-table-wrap { overflow-x: auto; margin: 1.2rem 0 .6rem; }
.fq-table { width: 100%; border-collapse: collapse; font-size: .9rem; }
.fq-table caption { text-align: left; padding-bottom: .6rem; font: 600 .74rem/1.4 var(--mono); letter-spacing: .14em; text-transform: uppercase; color: var(--fq-ink-2); }
.fq-table th, .fq-table td { padding: .5rem .6rem; border-bottom: 1px solid var(--fq-line); text-align: left; }
.fq-table thead th { font: 600 .74rem var(--mono); letter-spacing: .06em; color: var(--fq-ink-2); }
.fq-table td { font-family: var(--mono); font-variant-numeric: tabular-nums; }
.fq-table td:first-child { color: var(--fq-gold); white-space: nowrap; }
.fq-table .num { text-align: right; }
.fq-ab { display: flex; flex-wrap: wrap; gap: .6rem; margin: 1.2rem 0 1.4rem; }
.fq-ab button { min-height: 2.9rem; padding: .55rem 1.2rem; border: 1.5px solid var(--fq-gold); border-radius: 999px; background: transparent; color: var(--fq-gold);
  font-weight: 700; font-size: .98rem; cursor: pointer; }
.fq-ab button:hover { background: rgba(233, 184, 102, .12); }
.fq-ab .fq-ab-stop { border-color: var(--fq-line-2); color: var(--fq-ink); }

.fq-teaser { position: relative; margin: 3.4rem 0 0; padding: clamp(1.3rem, 4vw, 2rem); border: 1px solid var(--fq-gold-dim); border-radius: 6px; overflow: hidden;
  background: radial-gradient(120% 140% at 100% 0, rgba(233, 184, 102, .16), transparent 55%), var(--fq-bg-2); }
.fq-teaser .fq-eyebrow { margin-top: 0; }
.fq-teaser h2 { margin: 0 0 .7rem; color: var(--fq-gold); }
.fq-teaser p:last-child { margin-bottom: 0; }
.fq-teaser-link { display: inline-block; padding: .7rem 1.1rem; border: 1px solid var(--fq-gold); border-radius: 4px; color: var(--fq-gold); font: 600 .9rem/1.2 var(--mono); letter-spacing: .06em; text-decoration: none; }
.fq-teaser-link:hover, .fq-teaser-link:focus-visible { background: var(--fq-gold); color: #0b0a09; }

.fq-more { list-style: none; display: grid; gap: .9rem; margin: 1.2rem 0 0; }
@media (min-width: 640px) { .fq-more { grid-template-columns: 1fr 1fr; } }
.fq-more a { display: block; height: 100%; padding: 1.1rem 1.2rem; border: 1px solid var(--fq-line-2); border-radius: 6px; text-decoration: none; color: var(--fq-ink); }
.fq-more a:hover { border-color: var(--fq-gold); }
.fq-more b { display: block; font-family: var(--fq-serif); font-weight: 500; font-size: 1.3rem; margin-bottom: .3rem; color: var(--fq-gold); }
.fq-more span { display: block; font-size: .95rem; line-height: 1.55; color: var(--fq-ink-2); }

.fq-faq { margin-top: 1rem; }
.fq-faq details { border-bottom: 1px solid var(--fq-line); }
.fq-faq summary { display: flex; justify-content: space-between; gap: 1rem; padding: 1rem 0; cursor: pointer; list-style: none; font-weight: 700; font-size: 1.04rem; line-height: 1.4; }
.fq-faq summary::-webkit-details-marker { display: none; }
.fq-faq summary::after { content: "+"; flex: none; font: 600 1.1rem/1.3 var(--mono); color: var(--fq-gold); }
.fq-faq details[open] summary::after { content: "\2013"; }
.fq-faq details p { margin: 0 0 1.1rem; }
.fq-bottom { padding-bottom: clamp(3rem, 7vw, 5rem); }