/* =====================================================================
   MobPhysioLab® — Adminpanel und Editor-Modus
   Teil 1: Editor-Leiste auf den Seiten   (wird nur bei Anmeldung geladen)
   Teil 2: Oberfläche von admin.html
   ===================================================================== */

:root{
  --mpl-bg:    #061a24;
  --mpl-line:  rgba(255,255,255,.14);
  --mpl-accent:#34c6e8;
  --mpl-ok:    #57e2b0;
  --mpl-warn:  #ffc46b;
  --mpl-text:  #ecf6fa;
  --mpl-muted: rgba(236,246,250,.62);
}

/* =================================================== 1 · EDITOR-LEISTE */
.mpl-bar{
  position:fixed; left:0; right:0; bottom:0; z-index:9999;
  display:flex; align-items:center; gap:10px; flex-wrap:wrap;
  padding:12px clamp(14px,3vw,26px);
  background:rgba(4,16,23,.97);
  border-top:1px solid var(--mpl-line);
  backdrop-filter:blur(14px);
  box-shadow:0 -18px 40px -30px #000;
  font-family:"Montserrat","Segoe UI",system-ui,sans-serif;
  color:var(--mpl-text);
}
body.mpl-has-bar{ padding-bottom:80px; }

.mpl-bar__tag{
  font-size:.6rem; font-weight:700; letter-spacing:.2em; text-transform:uppercase;
  color:#04121a; background:var(--mpl-accent);
  padding:5px 11px; border-radius:999px;
}
.mpl-bar__page{
  font-size:.74rem; color:var(--mpl-muted); letter-spacing:.05em;
  margin-left:auto; white-space:nowrap;
}
.mpl-ico{ font-size:.9rem; line-height:1; }
.mpl-btn.is-on{ background:var(--mpl-ok); border-color:var(--mpl-ok); color:#04121a; }
.mpl-btn.is-on:hover{ background:#7ff0c6; border-color:#7ff0c6; }

/* ------------------------------------------------------- Rückmeldung */
.mpl-toast{
  position:fixed; left:50%; bottom:96px; z-index:10000;
  transform:translate(-50%,14px);
  max-width:min(560px,92vw);
  padding:13px 22px; border-radius:999px;
  background:rgba(4,16,23,.97);
  border:1px solid var(--mpl-line);
  box-shadow:0 20px 50px -24px #000;
  font-family:"Montserrat","Segoe UI",system-ui,sans-serif;
  font-size:.82rem; color:var(--mpl-text); text-align:center;
  opacity:0; visibility:hidden; pointer-events:none;
  transition:opacity .3s, transform .3s, visibility .3s;
}
.mpl-toast.is-on{ opacity:1; visibility:visible; transform:translate(-50%,0); }
.mpl-toast.is-ok{ border-color:rgba(87,226,176,.5); color:var(--mpl-ok); }
.mpl-toast.is-warn{ border-color:rgba(255,196,107,.5); color:var(--mpl-warn); }

/* ---------------------------------------------- Liste aller Inhalte */
.mpl-drawer{
  position:fixed; right:0; top:0; bottom:0; z-index:9998;
  width:min(390px,92vw);
  display:flex; flex-direction:column;
  background:rgba(4,16,23,.98);
  border-left:1px solid var(--mpl-line);
  backdrop-filter:blur(16px);
  box-shadow:-30px 0 60px -40px #000;
  font-family:"Montserrat","Segoe UI",system-ui,sans-serif;
  transform:translateX(102%);
  transition:transform .35s cubic-bezier(.16,1,.3,1);
}
.mpl-drawer.is-on{ transform:none; }
.mpl-drawer__top{
  display:flex; align-items:center; justify-content:space-between; gap:12px;
  padding:18px 20px 14px;
  border-bottom:1px solid var(--mpl-line);
}
.mpl-drawer__top strong{
  font-size:.78rem; font-weight:700; letter-spacing:.16em; text-transform:uppercase;
  color:var(--mpl-text);
}
.mpl-x{
  width:32px; height:32px; border-radius:999px; flex-shrink:0;
  border:1px solid var(--mpl-line); background:none; color:var(--mpl-text);
  font-size:1.2rem; line-height:1; cursor:pointer;
}
.mpl-x:hover{ background:var(--mpl-accent); border-color:var(--mpl-accent); color:#04121a; }

.mpl-search{
  margin:14px 20px; padding:11px 15px;
  font:inherit; font-size:.86rem; color:#fff;
  background:rgba(255,255,255,.05);
  border:1px solid var(--mpl-line); border-radius:10px;
}
.mpl-search:focus{ outline:none; border-color:var(--mpl-accent); }

.mpl-drawer__list{ flex:1; overflow-y:auto; padding:0 14px 100px; }
.mpl-item__sec{
  padding:16px 6px 7px;
  font-size:.62rem; font-weight:700; letter-spacing:.17em; text-transform:uppercase;
  color:var(--mpl-accent);
}
.mpl-item{
  display:flex; align-items:flex-start; gap:9px; width:100%;
  padding:10px 12px; margin-bottom:3px;
  border:1px solid transparent; border-radius:9px;
  background:rgba(255,255,255,.03);
  color:var(--mpl-text); text-align:left; cursor:pointer;
  font:inherit; font-size:.8rem; line-height:1.45;
}
.mpl-item:hover{ background:rgba(52,198,232,.13); border-color:rgba(52,198,232,.35); }
.mpl-item.is-changed{ border-color:rgba(87,226,176,.4); }
.mpl-item__tag{
  flex-shrink:0; font-size:.56rem; font-weight:700; letter-spacing:.1em;
  text-transform:uppercase; color:var(--mpl-accent);
  border:1px solid rgba(52,198,232,.3); border-radius:999px;
  padding:2px 7px; margin-top:2px;
}
.mpl-item__txt{ flex:1; color:rgba(236,246,250,.85); }
.mpl-item.is-changed .mpl-item__txt{ color:var(--mpl-ok); }

/* kurzes Aufblinken beim Anspringen */
.mpl-flash{
  animation:mplFlash 1.4s ease-out;
  border-radius:4px;
}
@keyframes mplFlash{
  0%,100%{ box-shadow:0 0 0 0 rgba(52,198,232,0); }
  20%    { box-shadow:0 0 0 6px rgba(52,198,232,.35); }
}

.mpl-btn{
  display:inline-flex; align-items:center; justify-content:center;
  padding:9px 17px; border-radius:999px;
  border:1px solid var(--mpl-line); background:rgba(255,255,255,.05);
  color:var(--mpl-text); text-decoration:none;
  font:inherit; font-size:.72rem; font-weight:600; letter-spacing:.12em;
  text-transform:uppercase; cursor:pointer; white-space:nowrap;
  transition:background .25s, border-color .25s, color .25s, opacity .25s;
}
.mpl-btn:hover{ background:var(--mpl-accent); border-color:var(--mpl-accent); color:#04121a; }
.mpl-btn:disabled{ opacity:.4; cursor:not-allowed; }
.mpl-btn:disabled:hover{ background:rgba(255,255,255,.05); border-color:var(--mpl-line); color:var(--mpl-text); }
.mpl-btn--main{ background:var(--mpl-accent); border-color:var(--mpl-accent); color:#04121a; }
.mpl-btn--danger:hover{ background:#ff7a7a; border-color:#ff7a7a; }

/* Hervorhebung der bearbeitbaren Stellen */
body.mpl-editing [contenteditable="true"]{
  outline:1px dashed rgba(52,198,232,.45);
  outline-offset:3px;
  border-radius:3px;
  cursor:text;
}
body.mpl-editing [contenteditable="true"]:hover{
  outline-style:solid;
  background:rgba(52,198,232,.07);
}
body.mpl-editing [contenteditable="true"]:focus{
  outline:2px solid var(--mpl-accent);
  background:rgba(52,198,232,.10);
}

body.mpl-editing .mpl-img-slot{ position:relative; cursor:pointer; }
body.mpl-editing .mpl-img-slot::after{
  content:"Bild ersetzen";
  position:absolute; left:50%; top:50%; transform:translate(-50%,-50%);
  z-index:40; pointer-events:none;
  font-size:.62rem; font-weight:700; letter-spacing:.15em; text-transform:uppercase;
  color:#04121a; background:var(--mpl-accent);
  padding:8px 15px; border-radius:999px;
  box-shadow:0 10px 30px -12px #000;
  opacity:0; transition:opacity .25s;
}
body.mpl-editing .mpl-img-slot:hover::after,
body.mpl-editing .mpl-img-slot.mpl-drop::after{ opacity:1; }
body.mpl-editing .mpl-img-slot:hover{ box-shadow:inset 0 0 0 2px var(--mpl-accent); }
body.mpl-editing .mpl-img-slot.mpl-drop{
  box-shadow:inset 0 0 0 3px var(--mpl-ok);
}
body.mpl-editing .mpl-img-slot.mpl-drop::after{ content:"Bild hier ablegen"; background:var(--mpl-ok); }
/* Bei den Waben sitzt die Beschriftung sonst unter dem Inhalt */
body.mpl-editing .hex.mpl-img-slot::after{ top:26%; }

/* ====================================================== 2 · PANEL */
body.mpl-admin{
  margin:0;
  font-family:"Montserrat","Segoe UI",system-ui,sans-serif;
  font-size:15px; line-height:1.65;
  color:var(--mpl-text);
  background:
    radial-gradient(80% 60% at 50% 0%, rgba(52,198,232,.10), transparent 60%),
    linear-gradient(180deg,#04121a,#072531 60%,#04121a);
  min-height:100vh;
}
.mpl-admin *,
.mpl-admin *::before,
.mpl-admin *::after{ box-sizing:border-box; }
.mpl-admin h1,.mpl-admin h2,.mpl-admin h3{ margin:0; line-height:1.2; }
.mpl-admin p{ margin:0 0 1em; }
.mpl-admin a{ color:var(--mpl-accent); }
/* Links, die als Schaltfläche auftreten, behalten die Button-Farben */
.mpl-admin a.mpl-btn{ color:var(--mpl-text); }
.mpl-admin a.mpl-btn--main,
.mpl-admin a.mpl-btn:hover{ color:#04121a; }

/* ---------------------------------------------------------- Anmeldung */
.mpl-login{
  min-height:100vh; display:grid; place-items:center; padding:28px;
}
.mpl-login__box{
  width:100%; max-width:430px;
  border:1px solid var(--mpl-line); border-radius:22px;
  background:linear-gradient(180deg, rgba(255,255,255,.05), rgba(255,255,255,.015));
  padding:clamp(28px,5vw,44px);
  box-shadow:0 40px 90px -50px #000;
}
.mpl-login__mark{
  display:flex; align-items:center; gap:12px; margin-bottom:26px;
}
.mpl-login__mark strong{
  font-size:1rem; font-weight:800; letter-spacing:.2em;
}
.mpl-login__mark em{
  display:block; font-style:normal; margin-top:2px;
  font-size:.56rem; letter-spacing:.3em; text-transform:uppercase; color:var(--mpl-accent);
}
.mpl-login h1{
  font-size:1.5rem; font-weight:800; letter-spacing:.04em; text-transform:uppercase;
  margin-bottom:8px;
}
.mpl-login__hint{ font-size:.86rem; color:var(--mpl-muted); margin-bottom:26px; }

.mpl-field{ display:flex; flex-direction:column; gap:7px; margin-bottom:16px; }
.mpl-field label{
  font-size:.66rem; font-weight:600; letter-spacing:.17em; text-transform:uppercase;
  color:var(--mpl-muted);
}
.mpl-field input,
.mpl-field textarea,
.mpl-field select{
  font:inherit; font-size:.95rem; color:#fff;
  background:rgba(255,255,255,.05);
  border:1px solid var(--mpl-line); border-radius:12px;
  padding:13px 15px;
}
.mpl-field textarea{ min-height:96px; resize:vertical; line-height:1.6; }
.mpl-field input:focus,
.mpl-field textarea:focus,
.mpl-field select:focus{
  outline:none; border-color:var(--mpl-accent); background:rgba(52,198,232,.07);
}
.mpl-field select option{ background:#08222e; }

.mpl-error{
  display:none; margin-bottom:16px; padding:12px 15px;
  border:1px solid rgba(255,122,122,.4); border-radius:12px;
  background:rgba(255,122,122,.1);
  font-size:.85rem; color:#ffb3b3;
}
.mpl-error.is-on{ display:block; }

/* ------------------------------------------------------------ Gerüst */
.mpl-app{ display:none; }
.mpl-app.is-on{ display:block; }

.mpl-top{
  position:sticky; top:0; z-index:20;
  display:flex; align-items:center; gap:16px; flex-wrap:wrap;
  padding:14px clamp(16px,3vw,32px);
  background:rgba(4,16,23,.94); backdrop-filter:blur(14px);
  border-bottom:1px solid var(--mpl-line);
}
.mpl-top h1{ font-size:.95rem; font-weight:800; letter-spacing:.2em; text-transform:uppercase; }
.mpl-top .mpl-user{ font-size:.74rem; color:var(--mpl-muted); }
.mpl-top__right{ margin-left:auto; display:flex; gap:9px; flex-wrap:wrap; }

.mpl-tabs{
  display:flex; gap:6px; flex-wrap:wrap;
  padding:16px clamp(16px,3vw,32px) 0;
}
.mpl-tab{
  padding:9px 18px; border-radius:999px;
  border:1px solid var(--mpl-line); background:rgba(255,255,255,.04);
  color:var(--mpl-muted); cursor:pointer;
  font:inherit; font-size:.7rem; font-weight:600; letter-spacing:.14em; text-transform:uppercase;
}
.mpl-tab:hover{ color:#fff; }
.mpl-tab.is-on{ background:var(--mpl-accent); border-color:var(--mpl-accent); color:#04121a; }

.mpl-panel{ display:none; padding:26px clamp(16px,3vw,32px) 80px; }
.mpl-panel.is-on{ display:block; }

.mpl-lede{ max-width:78ch; color:var(--mpl-muted); font-size:.92rem; }

/* -------------------------------------------------------- Seitenliste */
.mpl-pages{
  display:grid; grid-template-columns:repeat(auto-fill,minmax(260px,1fr));
  gap:14px; margin-top:22px;
}
.mpl-page{
  border:1px solid var(--mpl-line); border-radius:18px;
  background:linear-gradient(180deg, rgba(255,255,255,.045), rgba(255,255,255,.012));
  padding:20px 20px 18px;
  display:flex; flex-direction:column; gap:10px;
}
.mpl-page h3{ font-size:.95rem; font-weight:700; letter-spacing:.06em; text-transform:uppercase; }
.mpl-page code{
  font-size:.74rem; color:var(--mpl-muted);
  font-family:ui-monospace,Consolas,monospace;
}
.mpl-page__count{
  font-size:.68rem; font-weight:600; letter-spacing:.14em; text-transform:uppercase;
  color:var(--mpl-accent);
}
.mpl-page__count.is-none{ color:var(--mpl-muted); }
.mpl-page__act{ display:flex; gap:8px; flex-wrap:wrap; margin-top:4px; }

/* ------------------------------------------------------ Feldbearbeitung */
.mpl-editor{ margin-top:22px; }
.mpl-editor__head{
  display:flex; align-items:center; gap:14px; flex-wrap:wrap; margin-bottom:18px;
}
.mpl-editor__head select{ min-width:230px; }

.mpl-fields{ display:grid; gap:12px; }
.mpl-fieldrow{
  border:1px solid var(--mpl-line); border-radius:16px;
  background:rgba(255,255,255,.03);
  padding:16px 18px;
}
.mpl-fieldrow.is-changed{ border-color:rgba(52,198,232,.45); background:rgba(52,198,232,.06); }
.mpl-fieldrow__top{
  display:flex; align-items:center; gap:10px; margin-bottom:9px;
}
.mpl-fieldrow__tag{
  font-size:.6rem; font-weight:700; letter-spacing:.16em; text-transform:uppercase;
  color:var(--mpl-accent);
  border:1px solid rgba(52,198,232,.35); border-radius:999px; padding:3px 10px;
}
.mpl-fieldrow__key{
  font-size:.68rem; color:rgba(236,246,250,.35);
  font-family:ui-monospace,Consolas,monospace;
  margin-left:auto; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; max-width:45%;
}
.mpl-fieldrow textarea{
  width:100%; font:inherit; font-size:.9rem; line-height:1.6; color:#fff;
  background:rgba(0,0,0,.25); border:1px solid var(--mpl-line); border-radius:10px;
  padding:11px 13px; resize:vertical; min-height:60px;
}
.mpl-fieldrow textarea:focus{ outline:none; border-color:var(--mpl-accent); }
.mpl-fieldrow__foot{ display:flex; gap:8px; margin-top:9px; }
.mpl-mini{
  font:inherit; font-size:.64rem; font-weight:600; letter-spacing:.12em; text-transform:uppercase;
  color:var(--mpl-muted); background:none; border:0; cursor:pointer; padding:4px 0;
}
.mpl-mini:hover{ color:var(--mpl-accent); }

/* ---------------------------------------------------------- Bilderliste */
.mpl-imgs{ display:grid; grid-template-columns:repeat(auto-fill,minmax(210px,1fr)); gap:14px; }
.mpl-imgcard{
  border:1px solid var(--mpl-line); border-radius:16px; overflow:hidden;
  background:rgba(255,255,255,.03);
}
.mpl-imgcard__prev{
  height:130px; background:#08222e center/cover no-repeat;
  border-bottom:1px solid var(--mpl-line);
  display:grid; place-items:center;
  font-size:.68rem; letter-spacing:.14em; text-transform:uppercase; color:rgba(255,255,255,.3);
}
.mpl-imgcard__body{ padding:13px 15px; display:flex; flex-direction:column; gap:9px; }
.mpl-imgcard__name{ font-size:.78rem; font-weight:600; }
.mpl-imgcard__key{
  font-size:.64rem; color:rgba(236,246,250,.32);
  font-family:ui-monospace,Consolas,monospace;
  overflow:hidden; text-overflow:ellipsis; white-space:nowrap;
}

/* ------------------------------------------------------------- Boxen */
.mpl-box{
  border:1px solid var(--mpl-line); border-radius:18px;
  background:linear-gradient(180deg, rgba(255,255,255,.045), rgba(255,255,255,.012));
  padding:24px; margin-bottom:16px; max-width:760px;
}
.mpl-box h3{
  font-size:.86rem; font-weight:700; letter-spacing:.14em; text-transform:uppercase;
  margin-bottom:12px;
}
.mpl-box p{ font-size:.9rem; color:var(--mpl-muted); }
.mpl-actions{ display:flex; gap:10px; flex-wrap:wrap; margin-top:14px; }

.mpl-note{
  border:1px solid rgba(255,196,107,.35); border-left-width:2px;
  background:rgba(255,196,107,.08);
  border-radius:12px; padding:16px 18px; max-width:760px;
  font-size:.88rem; color:rgba(255,255,255,.82);
}
.mpl-note strong{ color:var(--mpl-warn); }

.mpl-code{
  display:block; margin-top:12px; padding:14px 16px;
  background:rgba(0,0,0,.35); border:1px solid var(--mpl-line); border-radius:10px;
  font-family:ui-monospace,Consolas,monospace; font-size:.76rem;
  color:var(--mpl-ok); word-break:break-all; white-space:pre-wrap;
}

.mpl-empty{
  padding:40px 0; text-align:center; color:var(--mpl-muted); font-size:.9rem;
}

@media (max-width:640px){
  .mpl-top__right{ width:100%; margin-left:0; }
  .mpl-fieldrow__key{ display:none; }
}