/* ═══════════════════════════════════════════════════════════════════════
   MISUNAI — die eigene Handschrift der Seite
   ═══════════════════════════════════════════════════════════════════════

   Liegt ÜBER mi-su.css und pages.css und ersetzt nichts davon. Navigation,
   Fuß, Typografie, Knöpfe und Karten kommen unverändert von dort — die
   Seite soll erkennbar zur Familie gehören.

   Was hier dazukommt, ist genau das, was MISUNAI von den anderen Produkten
   unterscheidet:

     · ein Akzent in Zyan statt Mint — dieselbe Farbe wie in der App
     · der Orb, der auch in der App oben links steht
     · die Zweiteilung Herz / Kopf als tragendes Bild
     · eine Statustafel, die zwischen „läuft" und „läuft nicht" unterscheidet

   ⚠️ HAUSREGEL: kein rohes Hex in einer Regel. Farben ausschließlich über
   Variablen. Die vier neuen stehen deshalb hier oben und nirgends sonst.

   ⚠️ Der Grund bleibt --ink aus mi-su.css. MISUNAI hat in der App einen
   eigenen, blaueren Grund (#0B0D10), aber eine Produktseite, die den
   Seitengrund wechselt, fällt beim Klicken aus dem Haus. Der Akzent trägt
   den Unterschied, nicht der Untergrund.
   ══════════════════════════════════════════════════════════════════════ */

:root {
  --cyan:      #00D4FF;   /* der Akzent der App */
  --cyan-weak: rgba(0, 212, 255, .13);
  --cyan-line: rgba(0, 212, 255, .34);
  --cyan-glow: rgba(0, 212, 255, .07);
}

/* ── Der Orb ─────────────────────────────────────────────────────────────
   Kein Kreis: die Kontur ist leicht unrund, genau wie in der App. Ein
   perfekter Kreis sähe nach Ladeanzeige aus, nicht nach etwas Lebendigem. */
.orb {
  width: 62px; height: 62px;
  border: 2px solid var(--cyan);
  border-radius: 47% 53% 51% 49% / 52% 48% 52% 48%;
  position: relative;
  margin-bottom: 26px;
  box-shadow: 0 0 34px var(--cyan-glow), inset 0 0 22px var(--cyan-glow);
}
.orb::after {
  content: ''; position: absolute; inset: 0; margin: auto;
  width: 9px; height: 9px; border-radius: 50%;
  background: var(--cyan);
  box-shadow: 0 0 12px var(--cyan);
}
/* Sehr langsam — der Orb soll atmen, nicht blinken. Wer Bewegung
   abgeschaltet hat, bekommt keine (mi-su.css schaltet global ab). */
@media (prefers-reduced-motion: no-preference) {
  .orb { animation: misunai-atmen 7s ease-in-out infinite; }
}
@keyframes misunai-atmen {
  0%, 100% { border-radius: 47% 53% 51% 49% / 52% 48% 52% 48%; }
  50%      { border-radius: 53% 47% 48% 52% / 47% 53% 47% 53%; }
}

/* ── Hero ────────────────────────────────────────────────────────────── */
.hero-misunai .eyebrow i { background: var(--cyan); box-shadow: 0 0 9px var(--cyan); }
.hero-misunai h1 em { font-style: normal; color: var(--cyan); }
.hero-misunai .btn-fill { background: var(--cyan); color: var(--ink); }
.hero-misunai .btn-fill:hover { background: var(--paper); }
.hero-misunai .btn-line:hover { border-color: var(--cyan-line); background: var(--cyan-weak); }

/* Der Schein hinter dem Hero. Sehr schwach — die Seite lebt von Ruhe. */
.hero-misunai::before {
  content: ''; position: absolute; pointer-events: none;
  top: -22%; right: -14%; width: 62vw; height: 62vw; max-width: 780px; max-height: 780px;
  background: radial-gradient(circle, var(--cyan-glow) 0%, transparent 68%);
}

/* ── Die zwei Organe ─────────────────────────────────────────────────── */
.organe {
  display: grid; grid-template-columns: 1fr auto 1fr; gap: 0;
  align-items: stretch; margin-bottom: 30px;
}
.organ {
  background: var(--ink-3); border: 1px solid var(--line);
  border-radius: 16px; padding: 26px 26px 28px;
}
.organ h3 {
  font-size: 20px; font-weight: 900; letter-spacing: -.5px;
  color: var(--paper); margin-bottom: 3px;
}
.organ .wo {
  display: block; font-size: 11.5px; font-weight: 700; letter-spacing: 1.1px;
  text-transform: uppercase; color: var(--cyan); margin-bottom: 15px;
}
.organ p { font-size: 14.5px; margin-bottom: 16px; }
.organ .tags .tag { border-color: var(--cyan-line); color: var(--mint); }

/* Die Verbindung zwischen beiden. Absichtlich dünn: es ist eine Leitung,
   die man kappen kann, keine Verschmelzung. */
.organ-band {
  display: flex; flex-direction: column; align-items: center;
  justify-content: center; padding: 0 22px; gap: 10px;
}
.organ-band i {
  display: block; width: 1px; flex: 1;
  background: linear-gradient(to bottom, transparent, var(--cyan-line), transparent);
}
.organ-band span {
  font-size: 10.5px; font-weight: 700; letter-spacing: 1.3px;
  text-transform: uppercase; color: var(--olive);
  writing-mode: vertical-rl; text-orientation: mixed;
}

/* ── Aufzählung mit Zwischenüberschrift ──────────────────────────────── */
.punkte { display: grid; gap: 1px; background: var(--line); border-radius: 14px; overflow: hidden; }
.punkt { background: var(--ink-3); padding: 22px 24px; }
.punkt h3 {
  font-size: 15.5px; font-weight: 700; color: var(--paper);
  margin-bottom: 6px; letter-spacing: -.2px;
}
.punkt p { font-size: 14px; }
.punkt strong { color: var(--mint); font-weight: 700; }

/* ── Die Sperre ──────────────────────────────────────────────────────── */
.sperre-liste { list-style: none; display: grid; gap: 11px; margin: 4px 0 24px; }
.sperre-liste li {
  display: flex; align-items: flex-start; gap: 12px;
  font-size: 14.5px; color: var(--mint);
}
.sperre-liste li::before {
  content: ''; flex: none; width: 15px; height: 15px; margin-top: 5px;
  border: 1.5px solid var(--cyan); border-radius: 4px;
  background:
    linear-gradient(to bottom right, transparent 44%, var(--cyan) 44%, var(--cyan) 56%, transparent 56%),
    linear-gradient(to bottom left,  transparent 44%, var(--cyan) 44%, var(--cyan) 56%, transparent 56%);
}

.kammer {
  background: var(--ink-2); border: 1px solid var(--cyan-line);
  border-radius: 16px; padding: 26px 28px;
}
.kammer h3 {
  font-size: 17px; font-weight: 900; color: var(--paper);
  letter-spacing: -.4px; margin-bottom: 12px;
  display: flex; align-items: center; gap: 11px;
}
.kammer h3 svg { width: 17px; height: 17px; color: var(--cyan); flex: none; }
.kammer p { font-size: 14px; }
.kammer p + p { margin-top: 13px; }
.kammer strong { color: var(--mint); font-weight: 700; }

/* ── Die drei Regeln ─────────────────────────────────────────────────── */
.regeln { counter-reset: regel; display: grid; gap: 16px; }
.regel {
  display: grid; grid-template-columns: auto 1fr; gap: 18px;
  align-items: start;
}
.regel::before {
  counter-increment: regel; content: counter(regel);
  width: 34px; height: 34px; border-radius: 50%;
  border: 1px solid var(--cyan-line); color: var(--cyan);
  display: grid; place-items: center;
  font-size: 13px; font-weight: 700;
}
.regel h3 { font-size: 15.5px; font-weight: 700; color: var(--paper); margin-bottom: 4px; }
.regel p { font-size: 14px; }
.regel strong { color: var(--mint); font-weight: 700; }

/* ── Die Statustafel ─────────────────────────────────────────────────────
   ⚠️ Der Unterschied zwischen „läuft" und „läuft nicht" darf NICHT allein
   an der Farbe hängen — grün und grau sind für einen Teil der Leser
   dasselbe. Deshalb trägt jede Zeile zusätzlich ein Zeichen (Haken oder
   Strich) und ein Wort in der Beschriftung. */
.stand { display: grid; gap: 1px; background: var(--line); border-radius: 14px; overflow: hidden; }
.stand-zeile {
  background: var(--ink-3); padding: 17px 22px;
  display: grid; grid-template-columns: auto 1fr; gap: 15px; align-items: start;
}
.stand-zeile.offen { background: var(--ink-2); }
.stand-mark {
  width: 21px; height: 21px; border-radius: 50%; margin-top: 2px;
  display: grid; place-items: center; flex: none;
  border: 1px solid var(--cyan-line);
}
.stand-zeile.offen .stand-mark { border-color: var(--line-2); }
.stand-mark svg { width: 11px; height: 11px; color: var(--cyan); }
.stand-zeile.offen .stand-mark svg { color: var(--olive); }
.stand-zeile h3 {
  font-size: 14.5px; font-weight: 700; color: var(--paper);
  margin-bottom: 3px; letter-spacing: -.2px;
}
.stand-zeile.offen h3 { color: var(--sage); }
.stand-zeile p { font-size: 13px; }
.stand-wort {
  font-size: 10.5px; font-weight: 700; letter-spacing: 1.1px;
  text-transform: uppercase; color: var(--cyan); margin-left: 9px;
}
.stand-zeile.offen .stand-wort { color: var(--olive); }

/* ── Nachsatz unter einem Abschnitt ──────────────────────────────────── */
.nachsatz {
  margin-top: 24px; padding-left: 18px;
  border-left: 2px solid var(--cyan-line);
  font-size: 14px; color: var(--mint); max-width: 62ch;
}
.nachsatz strong { color: var(--paper); font-weight: 700; }

/* ── Schmale Schirme ─────────────────────────────────────────────────── */
@media (max-width: 860px) {
  .organe { grid-template-columns: 1fr; gap: 16px; }
  .organ-band { flex-direction: row; padding: 0; height: 34px; }
  .organ-band i { width: auto; height: 1px; flex: 1;
    background: linear-gradient(to right, transparent, var(--cyan-line), transparent); }
  .organ-band span { writing-mode: horizontal-tb; }
}
@media (max-width: 620px) {
  .regel { grid-template-columns: 1fr; gap: 10px; }
  .orb { width: 52px; height: 52px; }
}