/* Kundenportal – nutzt die Farben des Theme mo-tools (Variablen mit Ersatzwerten, falls ein anderes Theme aktiv ist). */
.mo-portal {
  --mo-bg: var(--bg, #0B0D10);
  --mo-flaeche: var(--flaeche, #12161B);
  --mo-linie: var(--linie, #1F262E);
  --mo-rand: var(--rand, #3A4450);
  --mo-text: var(--text, #E6E8EB);
  --mo-leise: var(--leise, #A9B1BB);
  --mo-akzent: var(--akzent, #C6F432);
  --mo-mono: var(--mono, ui-monospace, Menlo, monospace);
  color: var(--mo-text);
  display: flex; flex-direction: column; gap: 24px;
}
.mo-portal h1, .mo-portal h2 { margin: 0; letter-spacing: -.02em; }
.mo-kicker { margin: 0; font-family: var(--mo-mono); font-size: 14px; color: var(--mo-akzent); }
.mo-titel { font-size: clamp(36px, 5vw, 60px); font-weight: 800; line-height: 1.02; margin: 6px 0 0 !important; }
.mo-leise { color: var(--mo-leise); margin: 0; line-height: 1.55; }
.mo-mono { font-family: var(--mo-mono); font-size: 13px; }
.mo-opt { color: var(--mo-leise); font-weight: 400; font-size: 13px; }

.mo-meldung { margin: 0; padding: 14px 16px; border-radius: 12px; border: 1px solid; font-weight: 600; }
.mo-meldung-ok { border-color: var(--mo-akzent); color: var(--mo-akzent); background: rgba(198, 244, 50, .06); }
.mo-meldung-fehler { border-color: #F2787A; color: #FFB4B5; background: rgba(242, 120, 122, .08); }

.mo-zwei { display: flex; flex-wrap: wrap; gap: 32px 48px; align-items: flex-start; }
.mo-zwei > * { flex: 1 1 360px; min-width: 0; }
.mo-intro { display: flex; flex-direction: column; gap: 16px; padding-top: 8px; }
.mo-punkte { margin: 0; padding: 0; list-style: none; display: flex; flex-direction: column; gap: 8px; }
.mo-punkte li::before { content: '+ '; color: var(--mo-akzent); font-family: var(--mo-mono); }

.mo-karte { background: var(--mo-flaeche); border: 1px solid var(--mo-linie); border-radius: 16px; padding: clamp(20px, 3vw, 28px); display: flex; flex-direction: column; gap: 16px; }
.mo-karte h2 { font-size: 22px; }
.mo-form { display: flex; flex-direction: column; gap: 14px; }
.mo-form p { margin: 0; display: flex; flex-direction: column; gap: 6px; }
.mo-form label { font-size: 14px; font-weight: 600; }
.mo-form input[type=text], .mo-form input[type=email], .mo-form input[type=password], .mo-form textarea, .mo-anfrage textarea {
  width: 100%; box-sizing: border-box; min-height: 46px; padding: 11px 14px; border-radius: 10px;
  background: var(--mo-bg); color: var(--mo-text); border: 1px solid var(--mo-rand); font: inherit; font-size: 16px; }
.mo-form textarea, .mo-anfrage textarea { min-height: 110px; resize: vertical; }
.mo-form input[readonly] { color: var(--mo-leise); border-style: dashed; }
.mo-form input:focus, .mo-form textarea:focus, .mo-anfrage textarea:focus { outline: 2px solid var(--mo-akzent); outline-offset: 1px; border-color: var(--mo-akzent); }
.mo-form fieldset { border: 1px solid var(--mo-linie); border-radius: 12px; padding: 12px 14px 14px; margin: 0; }
.mo-form legend { font-size: 14px; font-weight: 600; padding: 0 6px; }
.mo-form .btn, .mo-karte .btn { align-self: flex-start; }
.mo-check { flex-direction: row !important; align-items: center; gap: 10px !important; }
.mo-check input { width: 20px; height: 20px; accent-color: var(--mo-akzent); flex: none; }
.mo-check label { font-weight: 400 !important; }
.mo-honig { position: absolute !important; left: -9999px; width: 1px; height: 1px; overflow: hidden; }
.mo-wechsel { margin: 0; font-size: 14px; color: var(--mo-leise); }

/* angemeldet */
.mo-kopf { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: flex-end; gap: 16px; }
.mo-tabs { display: flex; flex-wrap: wrap; gap: 4px; padding: 6px; background: var(--mo-flaeche); border: 1px solid var(--mo-linie); border-radius: 12px; align-self: flex-start; }
.mo-tabs a { padding: 10px 16px; border-radius: 8px; color: var(--mo-leise); text-decoration: none; font-weight: 600; font-size: 15px; display: inline-flex; align-items: center; gap: 8px; min-height: 44px; box-sizing: border-box; }
.mo-tabs a:hover { color: var(--mo-text); }
.mo-tabs a[aria-current="page"] { background: var(--mo-akzent); color: var(--mo-bg); }
.mo-zahl { display: inline-block; min-width: 20px; padding: 1px 7px; border-radius: 999px; background: var(--mo-akzent); color: var(--mo-bg); font-size: 12px; font-weight: 700; text-align: center; box-sizing: border-box; }
.mo-tabs a[aria-current="page"] .mo-zahl { background: var(--mo-bg); color: var(--mo-akzent); }
.mo-bereich { display: flex; flex-direction: column; gap: 14px; }
.mo-bereich.mo-zwei { flex-direction: row; }
.mo-leer { margin: 0; padding: 22px; border: 1px dashed var(--mo-rand); border-radius: 14px; color: var(--mo-leise); }
.mo-zwischen { font-size: 20px; margin-top: 18px !important; color: var(--mo-leise); }

.mo-programm { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; gap: 16px 24px; background: var(--mo-flaeche); border: 1px solid var(--mo-linie); border-radius: 16px; padding: 20px 22px; }
.mo-programm h2 { font-size: 24px; }
.mo-programm h2 a { color: var(--mo-text); text-decoration: none; }
.mo-programm h2 a:hover { color: var(--mo-akzent); }
.mo-programm-text { display: flex; flex-direction: column; gap: 8px; flex: 1 1 320px; min-width: 0; }
.mo-programm-aktion { display: flex; flex-direction: column; align-items: flex-start; gap: 8px; flex: 0 1 auto; }
.mo-programm-aus { background: transparent; }
.mo-hervor { border-color: var(--mo-akzent); }
.mo-anfrage { min-width: min(100%, 320px); }
.mo-anfrage label { font-size: 13px; }
.mo-status { margin: 0; display: flex; align-items: center; gap: 8px; color: var(--mo-akzent); font-weight: 600; font-size: 15px; flex-wrap: wrap; }
.mo-status-aus { color: #F2B04C; }
.mo-punkt { width: 8px; height: 8px; border-radius: 50%; background: currentColor; flex: none; }
.mo-lizenz { margin: 0; color: var(--mo-leise); }

.mo-postfach { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 360px), 1fr)); gap: 24px; align-items: start; }
.mo-nachrichten { display: flex; flex-direction: column; gap: 12px; }
.mo-nachricht { border: 1px solid var(--mo-linie); border-radius: 14px; padding: 14px 16px; background: var(--mo-flaeche); }
.mo-von-kunde { background: transparent; margin-left: 32px; }
.mo-neu { border-color: var(--mo-akzent); }
.mo-nachricht header { display: flex; flex-wrap: wrap; gap: 4px 8px; align-items: baseline; font-size: 14px; margin-bottom: 8px; }
.mo-nachricht header time { margin-left: auto; color: var(--mo-leise); font-size: 12px; }
.mo-nachricht-text { line-height: 1.6; color: var(--mo-text); overflow-wrap: anywhere; }
.mo-gefahr { border-style: dashed; }
.mo-knoepfe { display: flex; flex-wrap: wrap; gap: 10px; }

/* Bestätigungsfenster „Freischaltung anfragen“ */
.mo-dialog { width: min(520px, calc(100vw - 32px)); padding: 0; border: 1px solid var(--mo-rand); border-radius: 18px;
  background: var(--mo-flaeche); color: var(--mo-text); box-shadow: 0 30px 80px rgba(0, 0, 0, .6); }
.mo-dialog::backdrop { background: rgba(5, 7, 9, .72); backdrop-filter: blur(3px); }
.mo-dialog form { padding: 24px; }
.mo-dialog h2 { font-size: 22px; }

@media (max-width: 640px) {
  .mo-von-kunde { margin-left: 12px; }
  .mo-programm-aktion { width: 100%; }
}