/* MM Kennenlernen — nutzt die Token aus mm-tokens.css des Child-Themes.
   Fallbacks stehen dabei, damit das Plugin auch ohne das Theme funktioniert. */

.mmk-root{
  --mmk-ink: var(--mm-ink, #393434);
  --mmk-blue: var(--mm-blue, #4377BB);
  --mmk-cream: var(--mm-cream, #F2F2EF);
  --mmk-surface: var(--mm-surface, #fff);
  --mmk-line: var(--mm-line, rgba(57,52,52,.16));
  --mmk-ink-70: var(--mm-ink-70, rgba(57,52,52,.70));
  --mmk-ink-45: var(--mm-ink-45, rgba(57,52,52,.45));
  --mmk-r: var(--mm-r-control, 10px);
  --mmk-boden-a: var(--mm-cream, #F2F2EF);
  --mmk-boden-b: #E6EDF6;
  --mmk-boden-c: #F0ECE4;
  position:relative;
  max-width:560px;
  margin:0 auto;
}

/* --- Bühne: alle Schirme übereinander, konstante Höhe --- */
.mmk-buehne{position:relative;min-height:min(78vh,660px)}
.mmk-schirm{
  display:none;
  flex-direction:column;
  min-height:min(78vh,660px);
  border:1px solid var(--mmk-line);
  border-radius:20px;
  overflow:hidden;
  background:var(--mmk-boden-a);
  transition:background-color .45s ease;
}
.mmk-schirm.mmk-an{display:flex}
.mmk-boden-a{background:var(--mmk-boden-a)}
.mmk-boden-b{background:var(--mmk-boden-b)}
.mmk-boden-c{background:var(--mmk-boden-c)}

.mmk-leiste{display:flex;align-items:center;gap:12px;padding:14px 18px 10px}
.mmk-zurueck{
  background:none;border:0;padding:4px 6px;cursor:pointer;
  font-size:16px;line-height:1;color:var(--mmk-ink-45);border-radius:6px;
}
.mmk-zurueck:hover,.mmk-zurueck:focus-visible{color:var(--mmk-blue)}
.mmk-fortschritt{flex:1;height:3px;background:rgba(57,52,52,.13);border-radius:3px;overflow:hidden}
.mmk-fortschritt i{display:block;height:100%;background:var(--mmk-blue);transition:width .35s ease}

.mmk-karte{
  background:var(--mmk-surface);
  border-radius:14px;
  margin:14px 16px 0;
  padding:20px 18px;
  display:grid;gap:13px;align-content:start;
}
.mmk-mitte{
  flex:1;display:grid;gap:14px;justify-items:center;align-content:center;
  text-align:center;padding:30px 26px;
}
.mmk-zeichen{
  width:92px;height:92px;border-radius:50%;
  background:radial-gradient(circle at 34% 30%, #8FB2E0, var(--mmk-blue) 68%, #35608F);
}
/* Traegt die Wortmarke. Ring oder Kugel, waehlbar im Adminbereich. */
svg.mmk-zeichen{background:none;display:block;color:var(--mmk-blue)}

/* ——— Bewegung: nur auf dem Ladeschirm ———
   Einstieg und Zuspruch tragen dasselbe Zeichen, aber still. Erst wo
   .mmk-laedt sitzt, faengt es an zu laufen. Ein Ladezeichen, das immer
   laeuft, ist Dekoration; eines, das nur beim Warten laeuft, ist Auskunft. */
.mmk-laedt.mmk-bew-ring-bogen .mmk-bogen{
  transform-origin:50px 50px;animation:mmk-kreisel 1.5s linear infinite;
}
.mmk-laedt.mmk-bew-ring-zeichnet .mmk-zeichnet{
  animation:mmk-zeichnen 2.4s ease-in-out infinite;
}
.mmk-laedt.mmk-bew-ring-atem .mmk-reif{
  transform-origin:50px 50px;animation:mmk-atmen 2.6s ease-in-out infinite;
}
.mmk-laedt.mmk-bew-ring-punkt .mmk-orbit{
  transform-origin:50px 50px;animation:mmk-kreisel 2.1s linear infinite;
}
.mmk-laedt.mmk-bew-kugel-licht .mmk-orbit{
  transform-origin:50px 50px;animation:mmk-kreisel 7s linear infinite;
}
.mmk-laedt.mmk-bew-kugel-meridian .mmk-mer{
  transform-origin:50px 50px;animation:mmk-meridian 4.2s ease-in-out infinite;
}
.mmk-laedt.mmk-bew-kugel-meridian .mmk-mer-2{animation-delay:-2.1s}

/* Still heisst wirklich still: voller Ring, keine Bewegungsteile.
   Ein angehaltener Spinner sieht aus wie ein Fehler, nicht wie ein Zeichen. */
.mmk-zeichen:not(.mmk-laedt) .mmk-grund{opacity:1}
.mmk-zeichen:not(.mmk-laedt) .mmk-bogen,
.mmk-zeichen:not(.mmk-laedt) .mmk-zeichnet,
.mmk-zeichen:not(.mmk-laedt) .mmk-orbit{display:none}
/* Die Kugel darf ihr Licht behalten — das ist Form, keine Bewegung. */
.mmk-zeichen:not(.mmk-laedt).mmk-bew-kugel-licht .mmk-orbit{display:block;transform:rotate(-32deg);transform-origin:50px 50px}
.mmk-zeichen:not(.mmk-laedt) .mmk-mer{transform:scaleX(.34);transform-origin:50px 50px}

@keyframes mmk-kreisel{to{transform:rotate(360deg)}}
@keyframes mmk-zeichnen{
  0%{stroke-dashoffset:295} 55%{stroke-dashoffset:0} 100%{stroke-dashoffset:-295}
}
@keyframes mmk-atmen{
  0%,100%{transform:scale(.93);opacity:.75} 50%{transform:scale(1.02);opacity:1}
}
@keyframes mmk-meridian{
  0%{transform:scaleX(.04)} 50%{transform:scaleX(1)} 100%{transform:scaleX(.04)}
}
@media (prefers-reduced-motion:reduce){
  .mmk-zeichen *{animation:none!important}
}
/* Fallback, wenn die Wortmarke abgeschaltet ist: dann ist das Zeichen ein div. */
div.mmk-laedt{animation:mmk-puls 1.4s ease-in-out infinite}
@keyframes mmk-puls{0%,100%{transform:scale(1);opacity:.85}50%{transform:scale(1.07);opacity:1}}

.mmk-frage{
  font-family:var(--mm-font-serif, Georgia, serif);
  font-style:italic;font-weight:400;
  font-size:clamp(21px,4.4vw,26px);line-height:1.26;margin:0;color:var(--mmk-ink);
  text-wrap:balance;
}
.mmk-hinweis{font-size:14px;line-height:1.5;color:var(--mmk-ink-70);margin:0}

/* Ueberschriften bekommen per JS den Fokus, damit Vorlesen am Anfang des
   Schirms einsetzt. Sie sind aber nichts zum Anklicken — der Fokusrahmen
   sah aus wie ein Fehler. */
.mmk-frage[tabindex]:focus{outline:none}
.mmk-fein{font-size:12px;line-height:1.5;color:var(--mmk-ink-45);margin:8px 0 0;text-align:center}

.mmk-optionen{display:grid;gap:8px;min-width:0}

/* reset.css des Themes setzt white-space:nowrap auf jeden button.
   In einem Grid heisst das: der laengste Antworttext bestimmt die
   Spaltenbreite, und die Karte wird breiter als das Telefon. Deshalb
   hier zurueckgenommen — und min-width:0, damit die Kinder schrumpfen
   duerfen statt ihre min-content-Breite zu erzwingen. */
.mmk-root button{white-space:normal}
.mmk-karte > *,.mmk-mitte > *{min-width:0;max-width:100%}
.mmk-plan,.mmk-plan > *{min-width:0;max-width:100%}
.mmk-frage,.mmk-hinweis,.mmk-fein{overflow-wrap:break-word}
.mmk-opt{
  white-space:normal;
  overflow-wrap:break-word;
  min-width:0;max-width:100%;
  border:1.5px solid var(--mmk-ink);
  border-radius:var(--mmk-r);
  background:transparent;
  color:var(--mmk-ink);
  padding:13px 15px;
  font:inherit;font-size:14.5px;line-height:1.35;
  text-align:left;cursor:pointer;min-height:48px;
  transition:background-color .18s ease,border-color .18s ease,color .18s ease;
}
.mmk-opt:hover,.mmk-opt:focus-visible{background:var(--mmk-blue);border-color:var(--mmk-blue);color:var(--mmk-cream)}
.mmk-opt[aria-pressed="true"]{background:var(--mmk-blue);border-color:var(--mmk-blue);color:var(--mmk-cream)}
@media (hover:none),(pointer:coarse){
  .mmk-opt:hover{background:transparent;border-color:var(--mmk-ink);color:var(--mmk-ink)}
  .mmk-opt[aria-pressed="true"]:hover{background:var(--mmk-blue);border-color:var(--mmk-blue);color:var(--mmk-cream)}
}

.mmk-feld{display:grid;gap:5px}
.mmk-feld-label{font-size:11px;letter-spacing:.08em;text-transform:uppercase;color:var(--mmk-ink-45)}
.mmk-feld input{
  border:1.5px solid var(--mmk-line);border-radius:var(--mmk-r);
  padding:12px 14px;font:inherit;font-size:15px;color:var(--mmk-ink);
  background:var(--mmk-surface);width:100%;
}
.mmk-feld input:focus{outline:none;border-color:var(--mmk-blue)}
.mmk-fehler{margin:0;font-size:13px;color:#9C3A3A;min-height:0}

/* Der Fuss sitzt unten, die Karte schwebt in der Mitte dazwischen.
   Alle Schirme sind gleich hoch; bei kurzen Fragen entstand sonst ein
   grosses Loch zwischen der letzten Antwort und dem Weiter-Knopf. */
.mmk-fuss{padding:14px 16px 16px}
.mmk-karte{margin-top:auto;margin-bottom:auto}
.mmk-weiter{
  display:block;width:100%;
  border:1.5px solid var(--mmk-blue);border-radius:var(--mmk-r);
  background:var(--mmk-blue);color:var(--mmk-cream);
  padding:13px 18px;font:inherit;font-size:12px;letter-spacing:.09em;text-transform:uppercase;
  cursor:pointer;min-height:48px;
  transition:opacity .18s ease;
}
.mmk-weiter[disabled]{opacity:.34;cursor:not-allowed}

/* --- Planseite --- */
.mmk-plan{margin-top:4px}
.mmk-planseite{
  border:1px solid var(--mmk-line);border-radius:20px;background:var(--mmk-cream);
  padding:22px 18px 0;display:grid;gap:14px;
}
.mmk-plan-marke{
  margin:0;font-size:11px;letter-spacing:.09em;text-transform:uppercase;color:var(--mmk-ink-45);
}
.mmk-plan-titel{
  font-family:var(--mm-font-serif, Georgia, serif);font-style:italic;font-weight:400;
  font-size:clamp(23px,5vw,30px);line-height:1.2;margin:0;color:var(--mmk-ink);text-wrap:balance;
}
.mmk-chips{display:flex;flex-wrap:wrap;gap:6px}
.mmk-chip{border:1px solid var(--mmk-line);border-radius:999px;padding:5px 12px;font-size:12px;color:var(--mmk-ink-70)}
.mmk-satz{
  font-family:var(--mm-font-serif, Georgia, serif);font-style:italic;
  font-size:16px;line-height:1.45;margin:0;
  border-left:2px solid var(--mmk-blue);padding-left:13px;color:var(--mmk-ink);
}
.mmk-karten{display:grid;gap:9px}
.mmk-plankarte{
  display:grid;gap:5px;text-decoration:none;color:inherit;
  background:var(--mmk-surface);border:1px solid var(--mmk-line);border-radius:12px;padding:14px 15px;
  transition:border-color .18s ease,transform .2s ease;
}
a.mmk-plankarte:hover,a.mmk-plankarte:focus-visible{border-color:var(--mmk-blue);transform:translateY(-1px)}
.mmk-plankarte-marke{font-size:10.5px;letter-spacing:.08em;text-transform:uppercase;color:var(--mmk-ink-45)}
.mmk-plankarte-marke b{color:var(--mmk-blue);font-weight:500}
.mmk-plankarte-titel{font-size:15px;line-height:1.3;color:var(--mmk-ink)}
.mmk-plankarte-kurz{font-size:13px;line-height:1.45;color:var(--mmk-ink-70)}

.mmk-person{display:flex;align-items:center;gap:12px;background:var(--mmk-surface);
  border-radius:12px;padding:12px 14px;font-size:13px;line-height:1.4;color:var(--mmk-ink-70)}
.mmk-person b{color:var(--mmk-ink);font-weight:500}
.mmk-person-bild{width:44px;height:44px;border-radius:50%;object-fit:cover;flex:0 0 auto}
.mmk-umfang{margin:0;padding:0;list-style:none;display:grid;gap:7px}
.mmk-umfang li{font-size:13.5px;line-height:1.45;color:var(--mmk-ink-70);padding-left:18px;position:relative}
.mmk-umfang li::before{content:"—";position:absolute;left:0;color:var(--mmk-blue)}
.mmk-fuss--plan{padding:6px 0 20px;display:grid;gap:8px}
.mmk-disclaimer{text-align:left;margin-top:4px}

/* --- Knopf ausserhalb des Pfades --- */
.mmk-knopfblock{display:grid;gap:7px;justify-items:start}
.mmk-knopf{
  display:inline-flex;align-items:center;justify-content:center;
  min-height:48px;padding:12px 22px;
  border:1.5px solid var(--mm-ink,#393434);border-radius:var(--mm-r-control,10px);
  background:transparent;color:var(--mm-ink,#393434);
  font-size:12px;letter-spacing:.09em;text-transform:uppercase;text-decoration:none;
  transition:background-color .2s ease,border-color .2s ease,color .2s ease,transform .22s ease;
}
.mmk-knopf:hover,.mmk-knopf:focus-visible{
  background:var(--mm-blue,#4377BB);border-color:var(--mm-blue,#4377BB);
  color:var(--mm-cream,#F2F2EF);transform:translateY(var(--mm-lift,-2px));
}
.mmk-knopf--voll{background:var(--mm-blue,#4377BB);border-color:var(--mm-blue,#4377BB);color:var(--mm-cream,#F2F2EF)}
.mmk-knopf--voll:hover,.mmk-knopf--voll:focus-visible{background:#35608F;border-color:#35608F}
.mmk-knopf-hinweis{margin:0;font-size:12.5px;line-height:1.45;color:var(--mm-ink-70,rgba(57,52,52,.7))}
@media (hover:none),(pointer:coarse){
  .mmk-knopf:hover{background:transparent;border-color:var(--mm-ink,#393434);color:var(--mm-ink,#393434);transform:none}
  .mmk-knopf--voll:hover{background:var(--mm-blue,#4377BB);border-color:var(--mm-blue,#4377BB);color:var(--mm-cream,#F2F2EF)}
}
.mmk-hinweis-admin{
  border:1px dashed rgba(57,52,52,.35);border-radius:8px;padding:10px 14px;
  font-size:13px;color:rgba(57,52,52,.7);
}
@media (prefers-reduced-motion:reduce){
  .mmk-schirm,.mmk-fortschritt i,.mmk-opt,.mmk-knopf,.mmk-plankarte{transition:none}
  .mmk-laedt{animation:none}
}

/* Kein Unterstrich auf den Plankarten. theme.css setzt .page-content a
   auf underline mit (0,1,1); Klasse doppelt genannt ergibt (0,2,1). */
a.mmk-plankarte.mmk-plankarte,
a.mmk-plankarte.mmk-plankarte span,
a.mmk-knopf.mmk-knopf{ text-decoration:none; }

/* Auf der Registrierung steht der Knopf unter einem zentrierten
   Formular — dort gehört er in die Mitte, sonst hängt er schief. */
.mmk-knopfblock--registrierung{ justify-items:center; text-align:center; }
.mmk-knopfblock--registrierung .mmk-knopf-hinweis{ max-width:34ch; }

/* --- Angebotsblöcke auf der Planseite --- */
.mmk-bloecke{display:grid;gap:9px}
.mmk-block{
  display:grid;gap:4px;text-decoration:none;color:inherit;
  background:var(--mmk-surface);border:1px solid var(--mmk-line);border-radius:12px;
  padding:15px 16px;
  transition:border-color .18s ease,transform .2s ease;
}
a.mmk-block:hover,a.mmk-block:focus-visible{border-color:var(--mmk-blue);transform:translateY(-1px)}
a.mmk-block.mmk-block,a.mmk-block.mmk-block span{text-decoration:none}
.mmk-block-titel{
  font-family:var(--mm-font-serif, Georgia, serif);font-style:italic;
  font-size:16.5px;line-height:1.3;color:var(--mmk-ink);
}
.mmk-block-bsp{font-size:13px;line-height:1.5;color:var(--mmk-ink-70)}
.mmk-block-vorsatz{
  display:inline-block;font-size:10px;letter-spacing:.09em;text-transform:uppercase;
  color:var(--mmk-ink-45);margin-right:5px;
}
.mmk-block-zusatz{color:var(--mmk-ink-45)}
.mmk-checkhinweis{text-align:left;margin-top:6px}
.mmk-checkhinweis a{color:var(--mmk-blue)}
@media (hover:none),(pointer:coarse){
  a.mmk-block:hover{border-color:var(--mmk-line);transform:none}
}

/* --- Hervorhebung, Coach, Newsletter, Precision-Leiter --- */
.mmk-block--hoch{border:1.5px solid var(--mmk-blue);box-shadow:0 4px 14px rgba(67,119,187,.14);position:relative}
.mmk-etikett{
  position:absolute;top:-9px;left:14px;background:var(--mmk-blue);color:var(--mmk-cream);
  font-size:9px;letter-spacing:.1em;text-transform:uppercase;padding:3px 9px;border-radius:999px;
}
.mmk-grund{font-size:12.5px;line-height:1.45;color:var(--mmk-blue);margin-top:2px}
.mmk-block-cta{
  display:inline-flex;align-items:center;justify-content:center;margin-top:8px;
  border:1.5px solid var(--mmk-blue);border-radius:var(--mmk-r);padding:10px 15px;
  font-size:10.5px;letter-spacing:.09em;text-transform:uppercase;color:var(--mmk-blue);
}
.mmk-nl{
  font-size:12px;line-height:1.45;color:var(--mmk-ink-70);
  border-top:1px solid var(--mmk-line);margin-top:4px;padding-top:8px;
}
.mmk-coach{display:flex;align-items:center;gap:11px;margin-top:4px}
.mmk-coach-bild{width:44px;height:44px;border-radius:50%;object-fit:cover;flex:0 0 auto}
.mmk-coach-bild--leer{background:radial-gradient(circle at 38% 30%,#C9B79F,#9C7550)}
.mmk-coach-text{display:grid;gap:1px;font-size:12px;line-height:1.4;color:var(--mmk-ink-70)}
.mmk-coach-text b{font-size:13.5px;color:var(--mmk-ink);font-weight:500}

.mmk-leiter{list-style:none;margin:0;padding:0;display:grid;gap:7px;counter-reset:stufe}
.mmk-stufe{
  display:grid;grid-template-columns:26px 1fr auto;gap:11px;align-items:start;
  border:1px solid var(--mmk-line);border-radius:10px;padding:11px 12px;background:var(--mmk-surface);
}
.mmk-stufe--hier{border-color:var(--mmk-blue);background:var(--mmk-surface)}
.mmk-stufe-nr{
  width:22px;height:22px;border-radius:50%;display:grid;place-items:center;
  font-size:11px;color:var(--mmk-ink-45);border:1px solid var(--mmk-line);
}
.mmk-stufe--hier .mmk-stufe-nr{background:var(--mmk-blue);border-color:var(--mmk-blue);color:var(--mmk-cream)}
.mmk-stufe-text{display:grid;gap:2px}
.mmk-stufe-text b{font-size:13px;font-weight:500;color:var(--mmk-ink)}
.mmk-stufe-text span{font-size:11.5px;line-height:1.45;color:var(--mmk-ink-70)}
.mmk-stufe-hier{
  font-size:9px;letter-spacing:.09em;text-transform:uppercase;color:var(--mmk-blue);
  border:1px solid var(--mmk-blue);border-radius:999px;padding:3px 8px;white-space:nowrap;
}
.mmk-checkhinweis--stark{
  border:1px solid var(--mmk-blue);border-radius:10px;padding:11px 13px;
  color:var(--mmk-ink-70);text-align:left;
}
.mmk-checkhinweis--stark a{color:var(--mmk-blue)}

/* ---------------------------------------------------------------
   Wissenschaftlicher Beleg auf dem Zuspruch-Bildschirm
   Das Punkteraster ist keine Dekoration: hundert Punkte,
   davon so viele gefuellt, wie die Prozentzahl sagt.
   --------------------------------------------------------------- */

.mmk-mitte--beleg{
  align-content:center;
  gap:12px;
  padding:26px 22px 30px;
}
.mmk-mitte--beleg .mmk-zeichen{width:56px;height:56px}

.mmk-beleg{
  margin:6px 0 0;
  width:100%;
  max-width:430px;
  background:var(--mmk-surface);
  border-radius:14px;
  padding:18px 18px 14px;
  text-align:left;
  display:grid;gap:12px;
}
.mmk-beleg[hidden]{display:none}

.mmk-beleg-kopf{
  display:grid;
  grid-template-columns:auto 1fr;
  gap:16px;
  align-items:center;
}

.mmk-raster{
  display:grid;
  grid-template-columns:repeat(10,1fr);
  gap:3px;
  width:104px;
  flex:none;
}
.mmk-punkt{
  display:block;
  width:100%;
  aspect-ratio:1/1;
  border-radius:50%;
  background:rgba(57,52,52,.14);
  transform:scale(.7);
  transition:background-color .3s ease,transform .3s ease;
}
.mmk-raster--an .mmk-punkt{transform:scale(1)}
.mmk-raster--an .mmk-punkt--voll{background:var(--mmk-blue)}

.mmk-beleg-wort{min-width:0}
.mmk-beleg-zahl{
  display:block;
  font-family:var(--mm-font-serif, Georgia, serif);
  font-size:clamp(30px,7vw,38px);
  line-height:1;
  font-weight:400;
  color:var(--mmk-blue);
  letter-spacing:-.01em;
}
.mmk-beleg-satz{
  display:block;
  margin-top:5px;
  font-size:13.5px;
  line-height:1.45;
  color:var(--mmk-ink-70);
}

.mmk-beleg-fuss{
  display:grid;gap:4px;
  font-style:normal;   /* manche Themes kursivieren figcaption */
  border-top:1px solid rgba(57,52,52,.1);
  padding-top:10px;
  font-size:11.5px;line-height:1.45;
  color:var(--mmk-ink-45);
}
.mmk-beleg-hinweis:empty{display:none}
.mmk-beleg-quelle a{color:var(--mmk-ink-45);text-decoration:underline;text-underline-offset:2px}
.mmk-beleg-quelle a:hover,.mmk-beleg-quelle a:focus-visible{color:var(--mmk-blue)}

.mmk-beleg-zweit{
  margin:0;
  max-width:430px;
  font-size:12.5px;line-height:1.5;
  color:var(--mmk-ink-45);
  text-align:left;
  width:100%;
}
.mmk-beleg-zweit[hidden]{display:none}

@media (max-width:400px){
  .mmk-beleg-kopf{grid-template-columns:1fr;gap:12px;justify-items:start}
  .mmk-raster{width:120px}
}
@media (prefers-reduced-motion:reduce){
  .mmk-punkt{transition:none;transform:scale(1)}
}