/**
 * Eigenes Terminbuchungs-UI im Termin-Popup (Anbieter 'calendly_api').
 * Ergaenzt mpk-popup.css: Theme-Tokens (--surface/--text/--acc/…) und die
 * Akzent-Variablen kommen von dort bzw. vom Backdrop (MPKD_Config::css_vars).
 * Alle Selektoren tragen das Plugin-Prefix mpkt-.
 */

.mpkt{display:flex;flex-direction:column;flex:1;min-width:0;min-height:0}
.mpkt *{box-sizing:border-box}

/* Eingabefelder bekommen eigene Tokens: eine zarte Fuellung setzt das Feld
   vom weissen Panel ab, der Fokus hebt es auf Weiss. Reine Linien auf Weiss
   wirkten gedraengt, sobald drei Felder untereinander stehen. */
.mpkp--light{--fld-bg:#f5f8fb;--fld-line:#dfe7f0;--fld-bg-focus:#ffffff}
.mpkp--dark{--fld-bg:rgba(255,255,255,.05);--fld-line:rgba(255,255,255,.13);--fld-bg-focus:rgba(255,255,255,.09)}

/* Im API-Modus braucht die rechte Seite mehr Platz als beim Fremd-Embed:
   Kalender UND Uhrzeiten-Raster liegen dort nebeneinander. Deshalb ein
   breiteres Modal und ein anderer Spalten-Schnitt als in mpk-popup.css.
   NUR ab Tablet-Breite: mpk-termin.css laedt NACH mpk-popup.css und ist
   spezifischer, ohne die Abfrage haette diese Regel die Ein-Spalten-Regel
   fuer Handys ueberstimmt und das Popup lief seitlich aus dem Bild. */
@media (min-width:821px){
  .mpkp--termin .mpkp-modal{width:min(1140px,100%);grid-template-columns:minmax(0,.72fr) minmax(0,1.28fr)}
  .mpkp--termin .mpkp-scheduler{padding:26px 28px}
}

/* Nur der aktive Schritt ist sichtbar — kein Layout-Shift beim Wechsel,
   weil die Hoehe vom Panel (mpkp-scheduler) kommt. */
.mpkt-pane{display:none;min-width:0}
.mpkt-pane.is-active{display:flex}

/* ---- Schritt 1: Kalender + Slots ---- */
/* Kalender bekommt mehr Breite als die Uhrzeiten-Spalte, aber die Uhrzeiten
   mindestens so viel, dass zwei Spalten hineinpassen (2 x 104 + Abstand). */
.mpkt-pane--pick{gap:26px;align-items:flex-start}
.mpkt-cal{flex:1 1 58%;min-width:0}
.mpkt-slots{flex:1 1 42%;min-width:228px;display:flex;flex-direction:column;gap:9px}

.mpkt-cal__head{display:flex;align-items:center;justify-content:space-between;gap:8px;margin-bottom:12px}
.mpkt-month{font-size:15.5px;font-weight:700;color:var(--text);text-align:center;flex:1}
.mpkt-nav{
  flex:0 0 auto;width:34px;height:34px;border-radius:10px;cursor:pointer;
  border:1px solid var(--line);background:transparent;color:var(--text);
  display:grid;place-items:center;transition:background .15s ease,border-color .15s ease;
}
.mpkt-nav:hover:not(:disabled){border-color:var(--acc);color:var(--acc-text)}
.mpkt-nav:disabled{opacity:.35;cursor:default}
.mpkt-nav svg{width:17px;height:17px}

.mpkt-dow{display:grid;grid-template-columns:repeat(7,1fr);gap:6px;margin-bottom:8px}
.mpkt-dow span{text-align:center;font-size:11px;font-weight:700;color:var(--muted);letter-spacing:.08em;text-transform:uppercase}

/* Tagesraster: runde Tage, grosszuegig gesetzt. Buchbare Tage tragen eine
   zarte Akzentflaeche, der gewaehlte Tag die volle Akzentfarbe — alles ueber
   die CSS-Variablen, damit die im Backend eingestellte Primaerfarbe gilt. */
.mpkt-grid{display:grid;grid-template-columns:repeat(7,1fr);gap:6px 4px}
.mpkt-day{
  position:relative;aspect-ratio:1;display:flex;align-items:center;justify-content:center;
  justify-self:center;width:100%;max-width:42px;
  border-radius:50%;border:none;font:inherit;font-size:14.5px;font-weight:600;
  background:transparent;color:var(--muted);
}
.mpkt-day--empty{visibility:hidden}
.mpkt-day--off{opacity:.45}
.mpkt-day--free{
  cursor:pointer;font-weight:700;color:var(--acc-text);background:var(--pi-bg);
  transition:background .15s ease,transform .12s ease,box-shadow .2s ease;
}
.mpkt-day--free:hover{transform:translateY(-1px);box-shadow:0 6px 14px -8px rgba(10,24,56,.45)}
.mpkt-day--free.is-selected{
  background:linear-gradient(135deg,var(--acc),var(--acc2));color:var(--ink);
  box-shadow:0 8px 18px -8px rgba(10,24,56,.5);
}
/* Punkt unter dem heutigen Tag — zweiter, nicht nur farblicher Hinweis. */
.mpkt-dot{position:absolute;bottom:2px;left:50%;transform:translateX(-50%);width:4px;height:4px;border-radius:50%;background:currentColor;opacity:.7}
.mpkt-day:focus-visible,.mpkt-slot:focus-visible,.mpkt-nav:focus-visible,.mpkt-btn:focus-visible{outline:2px solid var(--acc-text);outline-offset:2px}

.mpkt-hint{margin:12px 0 0;font-size:12.5px;line-height:1.5;color:var(--muted)}
.mpkt-hint--warn{color:#b4581a;font-weight:600}

.mpkt-slots__title{margin:0;font-size:16px;font-weight:800;color:var(--text);letter-spacing:-.01em;min-height:20px}
.mpkt-slots__note{margin:-4px 0 2px;font-size:12.5px;color:var(--muted)}
.mpkt-slots__note:empty{display:none}
/* Zwei Spalten wie im Vorbild; auf schmalen Panels faellt es auf eine zurueck. */
.mpkt-slots__list{display:grid;grid-template-columns:repeat(auto-fit,minmax(104px,1fr));gap:9px;align-content:start}
.mpkt-slots__empty{margin:0;font-size:12.5px;color:var(--muted);grid-column:1/-1}
.mpkt-slot{
  padding:13px 6px;border-radius:11px;cursor:pointer;font:inherit;font-size:15px;font-weight:700;
  border:1.5px solid var(--pi-line);background:var(--surface);color:var(--acc-text);
  transition:border-color .15s ease,transform .12s ease,background .15s ease,color .15s ease;
}
.mpkt-slot:hover{border-color:var(--acc);transform:translateY(-1px)}
.mpkt-slot.is-selected{
  background:linear-gradient(135deg,var(--acc),var(--acc2));color:var(--ink);border-color:transparent;
}
.mpkt-tz{margin:2px 0 0;font-size:11.5px;color:var(--muted)}

/* Skeleton: gleiche Groesse wie die echten Elemente -> kein Springen. */
.mpkt-day--skel,.mpkt-slot--skel{
  border:1px solid var(--line);background:var(--panel);cursor:default;
  animation:mpktPulse 1.4s ease-in-out infinite;
}
.mpkt-slot--skel{height:42px;border-radius:10px;display:block}
@keyframes mpktPulse{0%,100%{opacity:.45}50%{opacity:.8}}

.mpkt-fail{
  grid-column:1/-1;border:1px dashed var(--line);border-radius:12px;padding:22px;
  font-size:13px;line-height:1.65;color:var(--muted);text-align:center;
}
.mpkt-fail a{color:var(--acc-text);font-weight:700;text-decoration:none;white-space:nowrap}
.mpkt-fail a:hover{text-decoration:underline}

/* ---- Schritt 2: Formular ---- */
.mpkt-pane--form{flex-direction:column;gap:22px}
.mpkt-chosen{
  display:flex;align-items:center;gap:10px;padding:11px 13px;border-radius:12px;
  background:var(--proof-bg);border:1px solid var(--proof-line);font-size:13.5px;font-weight:700;color:var(--text);
}
.mpkt .mpkt-chosen__ico{flex:0 0 auto;display:flex;color:var(--acc-text)}
.mpkt .mpkt-chosen__ico svg{width:17px;height:17px;display:block}
.mpkt-chosen__text{flex:1;min-width:0;line-height:1.35}
.mpkt-chosen .mpkt-back{
  flex:0 0 auto;border:none;background:transparent;cursor:pointer;font:inherit;font-size:12.5px;
  font-weight:700;color:var(--acc-text);text-decoration:underline;padding:0;
}

.mpkt-field{display:flex;flex-direction:column;gap:9px}
/* Das Label soll das Feld benennen, nicht mit der Ueberschrift konkurrieren:
   klein, grau und gesperrt — dieselbe Tonlage wie der Eyebrow im Panel. */
.mpkt-field label{
  font-size:11.5px;font-weight:600;color:var(--muted);
  letter-spacing:.07em;text-transform:uppercase;
}
.mpkt-opt{font-weight:500;text-transform:none;letter-spacing:.01em;opacity:.8}
.mpkt-field input,.mpkt-field textarea{
  width:100%;padding:16px;border-radius:13px;font:inherit;font-size:15px;
  border:1px solid var(--fld-line);background:var(--fld-bg);color:var(--text);
  transition:border-color .15s ease,box-shadow .15s ease,background-color .15s ease;
}
.mpkt-field input::placeholder,.mpkt-field textarea::placeholder{color:var(--muted);opacity:.75}
.mpkt-field textarea{resize:vertical;min-height:96px;line-height:1.55}
.mpkt-field input:focus,.mpkt-field textarea:focus{
  outline:none;border-color:var(--acc);background:var(--fld-bg-focus);
  box-shadow:0 0 0 3px rgba(58,175,201,.16);
}
.mpkt-field.has-error input{border-color:#d63638}
.mpkt-err{font-size:11.5px;color:#d63638;font-weight:600;min-height:0}
.mpkt-field.has-error .mpkt-err{min-height:16px}

/* Honeypot: fuer Besucher unsichtbar, fuer Bots im DOM vorhanden. Bewusst
   nicht display:none — manche Bots ueberspringen genau das. */
.mpkt-hp{position:absolute;left:-9999px;width:1px;height:1px;overflow:hidden}

.mpkt-formerr{margin:0;font-size:12.5px;font-weight:600;color:#d63638;line-height:1.5}
.mpkt-formerr:empty{display:none}

.mpkt-actions{display:flex;gap:11px;align-items:center;margin-top:10px}
.mpkt-btn{
  padding:13px 20px;border-radius:999px;cursor:pointer;font:inherit;font-size:14.5px;font-weight:700;
  border:1px solid transparent;transition:transform .15s ease,box-shadow .2s ease,opacity .15s ease;
}
.mpkt-btn--go{
  flex:1;color:var(--ink);background:linear-gradient(135deg,var(--acc),var(--acc2));
  box-shadow:0 12px 28px -14px rgba(58,175,201,.7);
}
.mpkt-btn--go:hover:not(:disabled){transform:translateY(-1px)}
.mpkt-btn--go:disabled{opacity:.6;cursor:default;transform:none}
.mpkt-btn--ghost{background:transparent;border-color:var(--line);color:var(--muted)}
.mpkt-btn--ghost:hover{border-color:var(--acc);color:var(--acc-text)}

.mpkt-privacy{margin:2px 0 0;font-size:11.5px;line-height:1.55;color:var(--muted)}
.mpkt-privacy a{color:var(--acc-text);text-decoration:underline}

/* ---- Schritt 3: Buchung laeuft / fertig ---- */
.mpkt-pane--busy{flex-direction:column;align-items:center;justify-content:center;gap:14px;min-height:300px;text-align:center}
.mpkt-busy__text{margin:0;font-size:14px;color:var(--muted)}
.mpkt-spin{
  width:34px;height:34px;border-radius:50%;border:3px solid var(--line);
  border-top-color:var(--acc);animation:mpktSpin .8s linear infinite;
}
@keyframes mpktSpin{to{transform:rotate(360deg)}}

.mpkt-pane--done{flex-direction:column;align-items:center;justify-content:center;gap:9px;min-height:320px;text-align:center}
.mpkt-pane--done .mpkt-btn{margin-top:10px}
.mpkt-done__ico{
  width:52px;height:52px;border-radius:50%;display:grid;place-items:center;font-size:26px;font-weight:800;
  color:var(--ink);background:linear-gradient(135deg,var(--acc),var(--acc2));
}
.mpkt-done__title{margin:4px 0 0;font-size:19px;font-weight:800;color:var(--text)}
.mpkt-done__sub{margin:0;font-size:14.5px;font-weight:700;color:var(--acc-text)}
.mpkt-done__note{margin:0;font-size:12.5px;color:var(--muted)}

/* ---- Mobil: Vollbild-Sheet, Kalender und Slots untereinander ---- */
@media (max-width:820px){
  .mpkt-pane--pick{flex-direction:column;gap:18px}
  /* min-width der Slot-Spalte zuruecknehmen, sonst sprengt sie das Handy-Layout. */
  .mpkt-cal,.mpkt-slots{flex:1 1 auto;width:100%;min-width:0}
  .mpkt-slots__list{grid-template-columns:repeat(auto-fit,minmax(88px,1fr))}
  .mpkt-day{max-width:46px}
  .mpkt-actions{flex-direction:column-reverse;align-items:stretch}
  .mpkt-btn{width:100%}
}
@media (max-width:600px){
  /* Vollbild-Sheet: das Popup selbst fuellt den Viewport, der Inhalt scrollt.
     Die Klasse mpkp--termin setzt MPKD_Popup nur im API-Modus — bewusst keine
     :has()-Selektoren, damit auch aeltere Browser das Sheet bekommen. */
  .mpkp--termin.mpkp-backdrop{padding:0}
  .mpkp--termin .mpkp-modal{
    width:100%;max-width:100%;max-height:100vh;height:100vh;border-radius:0;border:none;
  }
  .mpkp--termin .mpkp-identity{border-radius:0;padding:26px 20px 20px}
  .mpkt-day{font-size:15px}
}
@media (prefers-reduced-motion:reduce){
  .mpkt *{animation:none!important;transition:none!important}
}

/* ---- Rueckfall-Angebot beim Schliessen ----
   Der erste Klick auf X blendet diese Leiste oben rechts ein (mpk-popup.js
   setzt .is-armed am Backdrop), der zweite schliesst. Liegt ueber dem oberen
   Rand des Modals, damit sie dort auftaucht, wo der Blick beim Schliessen
   ohnehin ist — und laesst das X frei. */
.mpkp-exit{
  position:absolute;top:12px;right:62px;z-index:4;max-width:min(380px,calc(100% - 90px));
  display:flex;align-items:center;gap:11px;padding:9px 14px 9px 10px;cursor:pointer;
  background:var(--surface);border:1px solid var(--line);border-radius:999px;
  box-shadow:0 14px 34px -16px rgba(8,20,45,.5);
  opacity:0;transform:translateY(-6px);transition:opacity .22s ease,transform .22s ease;
}
.mpkp-exit[hidden]{display:none}
.mpkp-backdrop.is-armed .mpkp-exit{opacity:1;transform:none}
.mpkp .mpkp-exit__img{
  flex:0 0 auto;width:36px;height:36px;border-radius:50%;background-size:cover;background-position:center;
  background-color:var(--panel);
}
.mpkp-exit__body{display:flex;flex-direction:column;gap:1px;min-width:0;text-decoration:none;color:inherit}
.mpkp-exit:hover{border-color:var(--acc)}
.mpkp-exit:hover .mpkp-exit__title{text-decoration:underline}
.mpkp-exit__title{font-size:13.5px;font-weight:700;color:var(--text);line-height:1.3}
.mpkp-exit__sub{font-size:12px;color:var(--muted);line-height:1.35}
/* Das X wird im "scharfen" Zustand zur Akzentfarbe — sichtbares Signal,
   dass der naechste Klick wirklich schliesst. */
.mpkp-backdrop.is-armed .mpkp-close{
  background:linear-gradient(135deg,var(--acc),var(--acc2));color:var(--ink);border-color:transparent;
}
@media (max-width:820px){
  .mpkp-exit{right:58px;left:14px;max-width:none;border-radius:14px}
}

/* ======================================================================
   Angebots-Funnel (.mpka) — liegt im selben Modal und uebernimmt beide
   Spalten, sobald er offen ist. Farben kommen wie ueberall aus den
   Akzent-Variablen, damit die eingestellte Primaerfarbe gilt.
   ====================================================================== */

/* Im Funnel-Modus Kalender und Identitaets-Panel ausblenden. */
.mpkp-backdrop.is-angebot .mpkp-identity,
.mpkp-backdrop.is-angebot .mpkp-scheduler{display:none}
.mpka[hidden]{display:none}
.mpka{grid-column:1/-1;display:grid;grid-template-columns:minmax(0,.78fr) minmax(0,1.22fr);min-width:0}

/* ---- Links: Angebots-Karte ---- */
.mpka-side{
  padding:30px 28px;background:var(--panel);border-right:1px solid var(--line);
  border-radius:calc(var(--rad) + 6px) 0 0 calc(var(--rad) + 6px);
  display:flex;flex-direction:column;gap:10px;min-width:0;
}
.mpka-back-booking{
  align-self:flex-start;border:none;background:transparent;cursor:pointer;padding:0;
  font:inherit;font-size:13px;font-weight:700;color:var(--acc-text);margin-bottom:4px;
}
.mpka-back-booking:hover{text-decoration:underline}
.mpka-eyebrow{margin:0;font-size:11px;font-weight:700;letter-spacing:.1em;text-transform:uppercase;color:var(--muted)}
.mpka-title{margin:0;font-size:21px;font-weight:800;letter-spacing:-.01em;color:var(--text);line-height:1.2}
.mpka-sub{margin:0 0 6px;font-size:13.5px;color:var(--muted)}

.mpka-card{
  background:var(--surface);border:1px solid var(--line);border-radius:14px;padding:14px 15px;
  box-shadow:0 14px 30px -22px rgba(8,20,45,.6);display:flex;flex-direction:column;gap:9px;
}
.mpka-card__head{display:flex;align-items:center;justify-content:space-between;gap:10px;padding-bottom:9px;border-bottom:1px solid var(--line)}
.mpka .mpka-card__logo{max-height:20px;width:auto !important;display:block}
.mpka-card__logo--text{font-size:12.5px;font-weight:800;color:var(--text);letter-spacing:-.01em}
.mpka-card__label{font-size:12.5px;font-weight:700;color:var(--muted)}
.mpka-card__for{margin:0;font-size:12.5px;color:var(--muted)}
.mpka-card__list{display:flex;flex-direction:column}
.mpka-card__row{
  display:flex;align-items:flex-start;justify-content:space-between;gap:10px;
  padding:9px 0;border-bottom:1px solid var(--line);font-size:13px;
}
.mpka-card__row:last-child{border-bottom:none}
.mpka-card__row b{display:block;font-weight:700;color:var(--text)}
.mpka-card__row span{display:block;font-size:12px;color:var(--muted);margin-top:1px}
.mpka-card__tick{flex:0 0 auto;color:var(--acc-text);font-weight:800}
.mpka-card__empty{margin:6px 0;font-size:12.5px;color:var(--muted)}
.mpka-card__price{
  display:flex;align-items:center;justify-content:space-between;gap:10px;margin-top:2px;
  padding:11px 12px;border-radius:11px;background:var(--pi-bg);border:1px solid var(--pi-line);
}
.mpka-card__price b{display:block;font-size:13.5px;font-weight:700;color:var(--text)}
.mpka-card__price > div > span{display:flex;align-items:center;gap:5px;font-size:11.5px;color:var(--muted);margin-top:2px}
.mpka .mpka-card__price svg{width:12px;height:12px;flex:0 0 auto}
.mpka-card__sum{font-size:16px;font-weight:800;color:var(--acc-text);white-space:nowrap}
/* Nur ein Stilmittel fuer den EIGENEN, echten Preis — es wird nichts erfunden. */
.mpka-card__sum.is-blurred{filter:blur(5px);user-select:none}
/* Ohne hinterlegten Betrag: unscharfer Block + scharfes Waehrungszeichen.
   Liest sich als verdeckter Preis, enthaelt aber keine einzige Ziffer. */
.mpka-card__sum--leer{display:inline-flex;align-items:baseline;gap:5px;filter:none}
.mpka-card__sum--leer i{
  display:block;width:64px;height:15px;border-radius:4px;
  background:currentColor;opacity:.42;filter:blur(4px);
}

.mpka-points{list-style:none;margin:8px 0 0;padding:0;display:flex;flex-direction:column;gap:8px}
.mpka-points li{display:flex;align-items:center;gap:9px;font-size:13px;color:var(--text)}
.mpka .mpka-points svg{width:16px;height:16px;flex:0 0 auto;color:var(--acc-text)}
.mpka-phone{margin-top:auto;padding-top:10px;display:flex;align-items:center;gap:8px;font-size:13px;font-weight:700;color:var(--acc-text);text-decoration:none}
.mpka .mpka-phone svg{width:15px;height:15px;flex:0 0 auto}
.mpka-phone:hover{text-decoration:underline}

/* ---- Rechts: Schritte ---- */
.mpka-main{padding:30px 30px;display:flex;flex-direction:column;gap:16px;min-width:0}
/* Rechts Platz lassen: der Schliessen-Button sitzt absolut in derselben Zeile
   und schnitt den Fortschrittstext sonst ab. */
.mpka-progress{display:flex;align-items:center;gap:12px;padding-right:50px}
.mpka-progress__bar{flex:1;height:4px;border-radius:999px;background:var(--line);overflow:hidden}
.mpka-progress__bar i{display:block;height:100%;width:0;border-radius:999px;background:linear-gradient(90deg,var(--acc),var(--acc2));transition:width .3s ease}
.mpka-progress__text{flex:0 0 auto;font-size:12.5px;color:var(--muted)}

/* Der Schritt-Inhalt wird vom JS eingesetzt und braucht hier die Spalten-
   Anordnung, sonst stehen Weiter-Button und Hinweis nebeneinander. */
.mpka-step{display:flex;flex-direction:column;gap:14px;min-width:0}
.mpka-step[hidden]{display:none}
/* .mpkt-btn--go traegt flex:1 (fuer die Button-Zeile im Terminformular);
   hier steht der Button allein in einer Spalte und soll voll breit sein. */
.mpka-step .mpkt-btn--go,
.mpka-form .mpkt-btn--go{flex:0 0 auto;width:100%}

.mpka-back{
  align-self:flex-start;border:none;background:transparent;cursor:pointer;padding:0;
  font:inherit;font-size:13px;font-weight:700;color:var(--muted);margin-bottom:2px;
}
.mpka-back:hover{color:var(--acc-text)}
.mpka-step .mpka-step__sub{margin-top:-8px}
.mpka-form .mpka-step__sub{margin-top:-8px}
.mpka-step__title{margin:0;font-size:22px;font-weight:800;letter-spacing:-.015em;color:var(--text);line-height:1.25}
.mpka-step__sub{margin:0;font-size:14px;color:var(--muted);line-height:1.5}

.mpka-opts{display:flex;flex-direction:column;gap:11px;margin-top:4px}
.mpka-opt{
  display:flex;align-items:center;justify-content:space-between;gap:12px;width:100%;
  padding:17px 19px;border-radius:13px;cursor:pointer;font:inherit;text-align:left;
  border:1.5px solid var(--pi-line);background:var(--surface);color:var(--text);
  transition:border-color .15s ease,transform .12s ease,background .15s ease,color .15s ease;
}
.mpka-opt:hover{border-color:var(--acc);transform:translateY(-1px)}
.mpka-opt__text b{display:block;font-size:15.5px;font-weight:700;line-height:1.25}
.mpka-opt__text span{display:block;font-size:13px;color:var(--muted);margin-top:2px}
.mpka-opt__ico{flex:0 0 auto;font-size:18px;font-weight:700;color:var(--acc-text);line-height:1}
/* Gewaehlt = zarte Akzentflaeche mit kraeftigem Rand, NICHT vollflaechig.
   Vorher sahen Auswahl und Weiter-Button gleich aus — drei kraeftige Bloecke
   uebereinander, in denen die eigentliche Aktion unterging. */
.mpka-opt.is-on{
  background:var(--pi-bg);border-color:var(--acc);color:var(--text);
}
.mpka-opt.is-on .mpka-opt__text span{color:var(--muted)}
.mpka-opt.is-on .mpka-opt__ico{color:var(--acc-text)}
.mpka-opt:focus-visible{outline:2px solid var(--acc-text);outline-offset:2px}

.mpka-next{margin-top:4px}
.mpka-hint{margin:0;font-size:12.5px;color:var(--muted);text-align:center}
.mpka-note{display:flex;align-items:center;justify-content:center;gap:6px;margin:2px 0 0;font-size:12px;color:var(--muted)}
.mpka .mpka-note svg{width:13px;height:13px;flex:0 0 auto}

.mpka-form{display:flex;flex-direction:column;gap:22px}
.mpka-form[hidden]{display:none}
.mpka-done{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:9px;min-height:300px;text-align:center}
.mpka-done[hidden]{display:none}

/* ---- Mobil ---- */
@media (max-width:820px){
  .mpka{grid-template-columns:1fr}
  .mpka-side{border-right:none;border-bottom:1px solid var(--line);border-radius:calc(var(--rad) + 6px) calc(var(--rad) + 6px) 0 0;padding:24px 20px}
  .mpka-main{padding:24px 20px}
  .mpka-step__title{font-size:19px}
  .mpka-phone{margin-top:8px}
}

/* Klartext-Fehler fuer eingeloggte Administratoren (Serverseite liefert ihn
   nur bei manage_options). Bewusst auffaellig und als solcher beschriftet,
   damit er nicht mit einer Besucher-Meldung verwechselt wird. */
.mpkt-adminfail{
  grid-column:1/-1;margin-top:10px;padding:12px 14px;border-radius:10px;text-align:left;
  background:#fff4e5;border:1px solid #f0c48a;color:#6b4a12;font-size:12.5px;line-height:1.55;
}
.mpkt-adminfail b{display:block;margin-bottom:4px;font-size:11.5px;text-transform:uppercase;letter-spacing:.05em}
.mpkt-adminfail span{display:block}
.mpkt-adminfail span + span{margin-top:5px;font-weight:600}