/* ============================================================
   Energie und Seele — Rituale zum Mitmachen (18.10.2026)
   Kerze antippen, Schritte abhaken, Antworten aufschreiben,
   am Ende auspusten und als Karte speichern.
   Alles bleibt im Browser, nichts wird gespeichert oder verschickt.
   ============================================================ */

.r-hinweis{ font-family:var(--mb-font-function); font-size:14.5px; line-height:23px; color:var(--text-2);
  margin:-4px 0 26px; max-width:66ch; padding-left:22px; position:relative; }
.r-hinweis::before{ content:"✦"; color:#6FA5A3; font-size:12px; position:absolute; left:0; top:0; }
.r-hinweis p{ margin:0; }
.r-hinweis p + p{ margin-top:8px; }

.ritual{ display:grid; grid-template-columns:230px minmax(0,1fr); gap:0 48px; align-items:start; max-width:980px; }
@media (max-width:820px){ .ritual{ grid-template-columns:1fr; } }

/* ---- Kerze ------------------------------------------------- */
.r-kerzenplatz{ position:sticky; top:110px; text-align:center; }
@media (max-width:820px){ .r-kerzenplatz{ position:relative; top:auto; display:grid; grid-template-columns:92px 1fr; gap:16px;
  align-items:center; text-align:left; margin:0 0 22px; padding:14px 18px; border:1px solid var(--rule);
  border-radius:var(--mb-radius-card); background:var(--feld); } }
.r-kerze{ display:block; margin:0 auto; padding:0; border:0; background:none; cursor:pointer; width:170px; -webkit-tap-highlight-color:transparent; }
@media (max-width:820px){ .r-kerze{ width:92px; margin:0; } }
.r-foto{ position:relative; display:block; width:100%; aspect-ratio:3/4; border-radius:50% 50% 18px 18px / 36% 36% 18px 18px;
  overflow:hidden; -webkit-mask-image:radial-gradient(ellipse 72% 62% at 50% 52%, #000 58%, transparent 100%);
  mask-image:radial-gradient(ellipse 72% 62% at 50% 52%, #000 58%, transparent 100%); }
.r-foto img, .r-foto video, .r-mini img{ position:absolute; inset:0; width:100%; height:100%; object-fit:cover;
  transition:opacity 1.1s var(--mb-ease); }
/* Nur die Kerze des eingestellten Modus zeigen (Silke, 18.10.2026: kein Wechsel hell/dunkel beim Anzünden) */
.r-foto .r-f-hell, .r-mini .r-f-hell,
html[data-modus="hell"] .r-foto .r-f-dunkel, html[data-modus="hell"] .r-mini .r-f-dunkel{ display:none; }
html[data-modus="hell"] .r-foto .r-f-hell, html[data-modus="hell"] .r-mini .r-f-hell{ display:block; }
.r-f-an, .r-f-film{ opacity:0; }
.ritual.an .r-f-an, .ritual.an .r-f-film.laeuft{ opacity:1; }
.ritual.an .r-f-aus{ opacity:0; }
.r-kerze:hover .r-foto{ filter:brightness(1.08); }
.r-kerze:focus-visible{ outline:2px solid var(--accent); outline-offset:6px; border-radius:12px; }
.r-kerzentext{ font-family:var(--mb-font-voice); font-style:italic; font-size:18px; line-height:26px; color:var(--head);
  margin:14px 0 0; min-height:52px; }
@media (max-width:820px){ .r-kerzentext{ margin:0; min-height:0; font-size:17px; } }


/* ---- Schritte ---------------------------------------------- */
.r-schritte{ list-style:none; margin:0; padding:0; counter-reset:r; }
.r-schritt{ counter-increment:r; position:relative; padding:18px 0 20px 56px; border-top:1px solid var(--rule); }
.r-schritt:last-child{ border-bottom:1px solid var(--rule); }
.r-schritt::before{ content:counter(r); position:absolute; left:0; top:18px; width:34px; height:34px; border-radius:50%;
  display:grid; place-items:center; font-family:var(--mb-font-voice); font-size:16px; color:var(--head);
  background:rgba(110,59,78,.55); transition:background .5s var(--mb-ease); }
html[data-modus="hell"] .r-schritt::before{ background:#E9D6DA; }
.r-schritt.fertig::before{ content:"✦"; font-size:14px; background:rgba(111,165,163,.22); color:#6FA5A3; box-shadow:0 0 0 1px rgba(111,165,163,.5); }
html[data-modus="hell"] .r-schritt.fertig::before{ background:#DCEAE8; color:#3A5A5C; box-shadow:0 0 0 1px #A9CBC8; }
.r-schritt b{ display:block; font-family:var(--mb-font-voice); font-weight:400; font-size:21px; line-height:28px; color:var(--head); margin:2px 0 4px; }
.r-schritt p{ margin:0; font-size:16.5px; line-height:27px; color:var(--text); max-width:60ch; }
html:not([data-modus="hell"]) .r-schritt p{ color:#E9DDD8; }
.r-haken{ position:absolute; left:-5px; top:13px; width:44px; height:44px; padding:0; margin:0; border:0; border-radius:50%;
  background:none; cursor:pointer; -webkit-tap-highlight-color:transparent; }
.r-haken:hover{ box-shadow:0 0 0 1px var(--accent) inset; }
.r-haken:focus-visible{ outline:2px solid var(--accent); outline-offset:2px; }

/* ---- Schreibfelder ----------------------------------------- */
.r-feld{ display:block; margin:14px 0 0; max-width:560px; }
.r-feld span{ display:block; font-family:var(--mb-font-voice); font-style:italic; font-size:17px; color:var(--head); margin:0 0 8px; }
.r-feld textarea, .r-feld input{ width:100%; box-sizing:border-box; font-family:var(--mb-font-function); font-size:16px; line-height:25px;
  padding:12px 14px; border-radius:var(--mb-radius-field); border:1px solid var(--rule); background:var(--feld); color:var(--text); resize:vertical; }
.r-feld textarea:focus, .r-feld input:focus{ outline:none; border-color:var(--accent); }
.r-feld textarea::placeholder, .r-feld input::placeholder{ color:var(--text-2); opacity:.55; }

/* ---- Abschluss --------------------------------------------- */
.r-ende{ margin:30px 0 0; padding:24px 26px; border:1px solid var(--rule); border-radius:var(--mb-radius-card); background:var(--feld); }
html:not([data-modus="hell"]) .r-ende{ background:var(--mb-licht), #1F1519; }
.r-ende h3{ font-family:var(--mb-font-voice); font-weight:400; font-size:24px; line-height:30px; color:var(--head); margin:0 0 6px; }
.r-ende p{ margin:0 0 16px; color:var(--text-2); font-size:15.5px; line-height:25px; }
.r-knoepfe{ display:flex; flex-wrap:wrap; gap:12px; }
.r-knopf{ font-family:var(--mb-font-function); font-weight:500; font-size:15px; padding:12px 22px; border-radius:999px; cursor:pointer;
  border:1px solid var(--accent); background:transparent; color:var(--accent); }
.r-knopf.voll{ background:#6FA5A3; border-color:#6FA5A3; color:#14201F; }
.r-knopf:hover{ filter:brightness(1.08); }
.r-nachher{ display:none; }
.ritual.aus .r-vorher{ display:none; }
.ritual.aus .r-nachher{ display:block; }
.r-satz{ font-family:var(--mb-font-voice); font-style:italic; font-size:26px; line-height:34px; color:var(--head); margin:0 0 10px; }

/* ---- Herbst: das Blatt ------------------------------------- */
.r-blatt-buehne{ position:relative; display:grid; grid-template-columns:150px 1fr; gap:18px; align-items:center; margin:16px 0 0; max-width:560px; }
.r-blatt{ width:150px; height:auto; transition:transform 1.6s cubic-bezier(.4,.1,.3,1), opacity 1.6s; transform-origin:50% 10%; }
.r-blatt text{ font-family:var(--mb-font-voice); font-style:italic; }
.r-heft{ display:none; margin:16px 0 0; padding:18px 20px; border-radius:14px; max-width:560px;
  background:#F2EAE3; color:#2E1E28; box-shadow:0 10px 28px rgba(0,0,0,.25); position:relative; }
.r-heft::before{ content:""; position:absolute; left:28px; top:0; bottom:0; width:1px; background:rgba(110,59,78,.3); }
.r-heft p{ line-height:1.3; margin:0 0 0 22px; font-family:var(--mb-font-voice); font-style:italic; font-size:22px; color:#6E3B4E; }
.r-heft small{ line-height:1.4; display:block; margin:0 0 4px 22px; font-family:var(--mb-font-function); font-style:normal; font-size:11px; letter-spacing:.18em;
  text-transform:uppercase; color:#8A6A70; }
.ritual.blatt-liegt .r-blatt{ transform:translate(40px, 150px) rotate(38deg) scale(.6); opacity:0; }
.ritual.blatt-liegt .r-heft{ display:block; animation:r-auf .8s .9s both; }
@keyframes r-auf{ from{ opacity:0; transform:translateY(8px); } to{ opacity:1; transform:none; } }

/* ---- Vollmond: der Zettel ---------------------------------- */
.r-zettel{ position:relative; margin:16px 0 0; max-width:420px; height:150px; }
.r-zettel-haelfte{ position:absolute; top:0; bottom:0; width:50%; background:#F2EAE3; color:#2E1E28; overflow:hidden;
  font-family:var(--mb-font-voice); font-style:italic; font-size:17px; line-height:24px; padding:16px 0;
  transition:transform 1.4s cubic-bezier(.4,.1,.3,1), opacity 1.4s; box-shadow:0 8px 22px rgba(0,0,0,.25); }
.r-zettel-haelfte.l{ left:0; border-radius:10px 0 0 10px; --riss:polygon(0 0,100% 0,96% 18%,100% 36%,94% 55%,100% 72%,95% 88%,100% 100%,0 100%); }
.r-zettel-haelfte.r{ right:0; border-radius:0 10px 10px 0; --riss:polygon(4% 0,100% 0,100% 100%,4% 100%,0 88%,5% 72%,0 55%,6% 36%,0 18%); }
.r-zettel-haelfte div{ width:200%; padding:0 18px; box-sizing:border-box; }
.r-zettel-haelfte.r div{ margin-left:-100%; }
.ritual.zerrissen .r-zettel-haelfte{ clip-path:var(--riss); }
.ritual.zerrissen .r-zettel-haelfte.l{ transform:translate(-30px, 60px) rotate(-18deg); opacity:0; }
.ritual.zerrissen .r-zettel-haelfte.r{ transform:translate(30px, 70px) rotate(16deg); opacity:0; }
.r-zettel-leer{ display:none; font-family:var(--mb-font-voice); font-style:italic; font-size:19px; color:var(--head); padding-top:50px; }
.ritual.zerrissen .r-zettel-leer{ display:block; animation:r-auf .8s 1s both; }

/* ---- Merkur: die offene Liste ------------------------------ */
.r-liste{ list-style:none; margin:14px 0 0; padding:0; max-width:560px; }
.r-liste li{ margin:0 0 10px; }
.r-liste input{ width:100%; box-sizing:border-box; font-family:var(--mb-font-function); font-size:16px; padding:12px 14px;
  border-radius:var(--mb-radius-field); border:1px solid var(--rule); background:var(--feld); color:var(--text); }
.r-liste input:focus{ outline:none; border-color:var(--accent); }
.r-wahl{ display:flex; flex-direction:column; gap:10px; margin:14px 0 0; max-width:560px; }
.r-wahl button{ text-align:left; font-family:var(--mb-font-function); font-size:16px; padding:12px 16px; border-radius:var(--mb-radius-field);
  border:1px solid var(--rule); background:var(--feld); color:var(--text); cursor:pointer; }
.r-wahl button[aria-pressed="true"]{ border-color:#6FA5A3; box-shadow:inset 0 0 0 1px #6FA5A3; }
.r-wahl button[aria-pressed="true"]::before{ content:"✦ "; color:#6FA5A3; }
.r-wahl .r-leer{ font-size:14.5px; color:var(--text-2); font-style:italic; }
.r-entscheid{ display:grid; gap:12px; margin:14px 0 0; max-width:620px; }
.r-entscheid .zeile{ padding:12px 16px; border:1px solid var(--rule); border-radius:var(--mb-radius-field); background:var(--feld); }
.r-entscheid .was{ display:block; font-size:16px; color:var(--text); margin:0 0 8px; }
.r-entscheid .wege{ display:flex; flex-wrap:wrap; gap:8px; }
.r-entscheid .wege button{ font-family:var(--mb-font-function); font-size:13.5px; padding:6px 14px; border-radius:999px; cursor:pointer;
  border:1px solid var(--rule); background:none; color:var(--text-2); }
.r-entscheid .wege button[aria-pressed="true"]{ background:#6FA5A3; border-color:#6FA5A3; color:#14201F; }
.r-phase{ display:inline-flex; gap:10px; align-items:baseline; margin:0 0 22px; padding:10px 16px; border-radius:999px;
  border:1px solid var(--rule); font-family:var(--mb-font-function); font-size:14.5px; color:var(--text); }
.r-phase b{ font-family:var(--mb-font-voice); font-weight:400; font-size:18px; color:var(--head); }

/* ---- Nächster Vollmond ------------------------------------- */
.r-naechster{ display:flex; gap:16px; align-items:center; margin:0 0 24px; padding:14px 18px; border:1px solid var(--rule);
  border-radius:var(--mb-radius-card); background:var(--feld); max-width:560px; }
.r-naechster svg{ width:46px; height:46px; flex:0 0 46px; }
.r-naechster .was{ display:block; font-family:var(--mb-font-function); font-weight:500; font-size:11px; letter-spacing:.18em;
  text-transform:uppercase; color:var(--accent); }
.r-naechster .wann{ display:block; font-family:var(--mb-font-voice); font-size:21px; line-height:28px; color:var(--head); }
.r-naechster .noch{ display:block; font-size:14.5px; color:var(--text-2); }

/* ---- Bewegung reduzieren ----------------------------------- */
@media (prefers-reduced-motion: reduce){
  .r-blatt, .r-zettel-haelfte{ transition:none; }
}

/* ---- Drucken: nur die eigene Karte ------------------------- */
.r-druck{ display:none; }
@media print{
  body.r-drucken > *:not(.r-druck){ display:none !important; }
  body.r-drucken .r-druck{ display:block !important; color:#2E1E28; font-family:Georgia, serif; padding:24px; }
  .r-druck h1{ font-size:26px; margin:0 0 4px; color:#6E3B4E; }
  .r-druck .datum{ font-size:13px; color:#8A6A70; margin:0 0 22px; }
  .r-druck h2{ font-size:15px; font-style:italic; margin:18px 0 4px; color:#6E3B4E; }
  .r-druck p{ font-size:15px; line-height:1.5; margin:0; white-space:pre-wrap; }
  .r-druck .fuss{ margin-top:30px; font-size:12px; color:#8A6A70; }
}

/* Feinschliff (18.10.2026) */
html .ritual .r-schritt .r-heft p{ color:#6E3B4E; opacity:1; }
html .ritual .r-schritt .r-heft small{ opacity:1; }
.ritual.blatt-weg .r-blatt-buehne{ display:none; }
.r-feld span, .r-kerzentext, .r-satz, .r-heft p, .r-zettel-haelfte, .r-zettel-leer{ font-variation-settings:'WONK' 0; }
.r-mini{ display:none; }
@media (max-width:820px){
  .r-mini{ display:block; width:46px; float:right; margin:-6px 0 0 14px; }
  .r-mini{ position:relative; aspect-ratio:3/4; border-radius:40% 40% 8px 8px; overflow:hidden; }
}
.sr-nur{ position:absolute; width:1px; height:1px; overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap; }
.r-klein-hinweis{ font-size:13.5px !important; line-height:21px !important; color:var(--text-2) !important; margin:8px 0 0 !important; font-style:italic; }
.r-naechster .zeichen{ display:inline; }
.r-zettel-haelfte.l{ box-shadow:-6px 8px 22px rgba(0,0,0,.25); } .r-zettel-haelfte.r{ box-shadow:6px 8px 22px rgba(0,0,0,.25); }
.ritual.zerrissen #r-zerreissen{ display:none; }