/* Magic Parcel Chat – Kundenansicht. Markenfarben aus dem MP-Logo: Silber/Stahlblau + Rot, Grund Anthrazit. */
:root {
  --grund: #121214; --grund2: #1b1b1f; --flaeche: #ffffff; --hell: #f4f5f7;
  --rot: #c8161d; --rot2: #8f0d12; --rot-hell: #e3262d;
  --silber: #c9d5e2; --stahl: #7c96a6; --text: #1d1f24; --text2: #5b6270; --rand: #e1e4ea;
  --radius: 14px;
}
[hidden] { display: none !important; }
* { box-sizing: border-box; }
html, body { height: 100%; margin: 0; }
body { font: 15px/1.45 "Segoe UI", system-ui, -apple-system, Roboto, sans-serif; color: var(--text); background: var(--grund); display: flex; flex-direction: column; -webkit-font-smoothing: antialiased; }
button { font: inherit; cursor: pointer; border: 0; }
button:disabled { opacity: .5; cursor: default; }

/* ---------- Hintergrund-Bühne (nur Anmelden/Kennwort) ---------- */
.buehne { position: fixed; inset: 0; overflow: hidden; pointer-events: none; z-index: 0;
  background: radial-gradient(1200px 700px at 50% -10%, #23232a 0%, var(--grund) 60%); }
.glanz { position: absolute; border-radius: 50%; filter: blur(90px); opacity: .55; }
.g1 { width: 520px; height: 520px; right: -140px; top: -120px; background: radial-gradient(circle, rgba(200,22,29,.75), rgba(143,13,18,0) 70%); }
.g2 { width: 600px; height: 600px; left: -220px; bottom: -260px; background: radial-gradient(circle, rgba(124,150,166,.55), rgba(124,150,166,0) 70%); }
.linien { position: absolute; inset: -50%; opacity: .07;
  background: repeating-linear-gradient(115deg, transparent 0 46px, rgba(201,213,226,.9) 46px 47px); transform: rotate(0deg); }

/* ---------- Eingang (Anmelden / Kennwort festlegen) ---------- */
main { position: relative; z-index: 1; flex: 1; min-height: 0; display: flex; flex-direction: column; align-items: center; padding: 16px; }
.eingang { width: 100%; max-width: 420px; margin: auto; display: flex; flex-direction: column; align-items: center; padding: 24px 0 16px; }
body[data-ansicht="chat"] .eingang { display: none; }
.marke { text-align: center; margin-bottom: 28px; animation: auf .6s ease-out both; }
.marke-logo { width: min(320px, 78vw); height: auto; display: block; margin: 0 auto; filter: drop-shadow(0 10px 30px rgba(0,0,0,.45)); }
.marke-titel { margin: 14px 0 0; font-size: 13px; font-weight: 600; letter-spacing: .5em; text-indent: .5em; text-transform: uppercase;
  background: linear-gradient(90deg, var(--silber), var(--stahl)); -webkit-background-clip: text; background-clip: text; color: transparent; }
.marke-text { margin: 10px 0 0; color: #9aa3b0; font-size: 14px; }

.karte { width: 100%; padding: 28px 28px 22px; border-radius: 18px; animation: auf .6s .08s ease-out both;
  background: linear-gradient(180deg, rgba(38,38,44,.86), rgba(24,24,28,.92)); border: 1px solid rgba(201,213,226,.12);
  box-shadow: 0 24px 60px rgba(0,0,0,.55), inset 0 1px 0 rgba(255,255,255,.06); backdrop-filter: blur(12px); color: #eef1f5; }
.karte h1 { margin: 0; font-size: 22px; font-weight: 650; letter-spacing: -.01em; }
.karte .unter { margin: 4px 0 18px; color: #a2aab6; font-size: 14px; }
.feld { display: block; margin: 0 0 14px; }
.feld span { display: block; font-size: 12.5px; font-weight: 600; color: #b9c2cd; margin-bottom: 6px; }
.feld input { width: 100%; font: inherit; color: #f4f6f9; padding: 12px 14px; border-radius: 10px; outline: none;
  background: rgba(10,10,12,.55); border: 1px solid rgba(201,213,226,.16); transition: border-color .15s, box-shadow .15s; }
.feld input::placeholder { color: #5f6672; }
.feld input:focus { border-color: var(--rot-hell); box-shadow: 0 0 0 3px rgba(227,38,45,.25); }
.haupt { padding: 12px 18px; border-radius: 10px; color: #fff; font-weight: 600;
  background: linear-gradient(135deg, var(--rot-hell), var(--rot) 45%, var(--rot2)); box-shadow: 0 6px 18px rgba(200,22,29,.35); transition: filter .15s, transform .05s; }
.haupt:hover { filter: brightness(1.08); }
.haupt:active { transform: translateY(1px); }
.karte .haupt { width: 100%; margin-top: 6px; padding: 13px; font-size: 15.5px; }
.geist { background: none; color: #a9b3bf; padding: 6px 0; }
.geist:hover { color: #fff; }
.klein-text { font-size: 13.5px; margin-top: 6px; }
.fehler { color: #ff8a8f; min-height: 1.2em; margin: 10px 0 0; font-size: 13.5px; }
.sicher { display: flex; align-items: center; gap: 6px; color: #6f7784; font-size: 12.5px; margin: 18px 0 0; }
.hinweis { position: relative; z-index: 1; color: #cfd5dd; text-align: center; margin: 0 0 24px; }
@keyframes auf { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: none; } }
@media (prefers-reduced-motion: reduce) { .marke, .karte { animation: none; } }

/* ---------- Kopf (nur im Chat) ---------- */
.kopf { display: none; position: relative; z-index: 2; align-items: center; gap: 12px; padding: 10px 18px; padding-top: max(10px, env(safe-area-inset-top));
  background: linear-gradient(180deg, #1c1c21, #141417); border-bottom: 1px solid rgba(201,213,226,.1); color: #eef1f5; }
body[data-ansicht="chat"] .kopf { display: flex; }
body[data-ansicht="chat"] .buehne { display: none; }
.kopf-symbol { height: 30px; width: auto; }
.kopf-name { display: flex; flex-direction: column; line-height: 1.1; }
.kopf-name b { white-space: nowrap; font-size: 15px; letter-spacing: .01em; }
.kopf-name span { font-size: 11px; letter-spacing: .35em; text-transform: uppercase; color: var(--stahl); }
.wer { margin-left: auto; font-size: 13.5px; color: #aeb6c1; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; min-width: 0; }
.kopf .geist { padding: 6px 10px; border-radius: 8px; border: 1px solid rgba(201,213,226,.18); font-size: 13px; }

/* ---------- Chat ---------- */
body[data-ansicht="chat"] { background: var(--hell); }
body[data-ansicht="chat"] main { padding: 0; }
.chat { width: 100%; max-width: 900px; flex: 1; min-height: 0; display: flex; flex-direction: column; background: var(--flaeche);
  border-left: 1px solid var(--rand); border-right: 1px solid var(--rand); }
.titel { padding: 12px 18px; border-bottom: 1px solid var(--rand); font-size: 13.5px; color: var(--text2); background: #fff; }
.titel b { color: var(--text); font-size: 15px; display: block; }
.liste { flex: 1; overflow-y: auto; padding: 18px; display: flex; flex-direction: column; gap: 10px; background: #f7f8fa; }
.msg { max-width: min(78%, 560px); padding: 9px 13px 7px; border-radius: 16px 16px 16px 4px; background: #fff; border: 1px solid var(--rand);
  align-self: flex-start; overflow-wrap: anywhere; box-shadow: 0 1px 2px rgba(16,24,40,.05); }
.msg.meine { align-self: flex-end; border-radius: 16px 16px 4px 16px; color: #fff; border-color: transparent;
  background: linear-gradient(135deg, var(--rot), var(--rot2)); }
.msg .von { font-size: 12px; font-weight: 600; color: var(--stahl); margin-bottom: 2px; }
.msg.meine .von { color: rgba(255,255,255,.75); }
.msg .t { white-space: pre-wrap; }
.msg .zeit { font-size: 11px; color: #8a919c; text-align: right; margin-top: 3px; }
.msg.meine .zeit { color: rgba(255,255,255,.7); }
.msg img { max-width: 100%; max-height: 280px; border-radius: 10px; margin-top: 6px; display: block; }
.msg a.datei { display: inline-block; margin-top: 6px; color: var(--rot); font-weight: 600; text-decoration: none; }
.msg.meine a.datei { color: #fff; text-decoration: underline; }
.anhaenge { padding: 0 18px; font-size: 13px; color: var(--text2); background: #fff; }
.anhaenge span { display: inline-block; background: #fbeaea; color: var(--rot2); border-radius: 999px; padding: 3px 10px; margin: 8px 6px 0 0; }
.senden { display: flex; gap: 10px; padding: 12px 18px; padding-bottom: max(12px, env(safe-area-inset-bottom)); border-top: 1px solid var(--rand); align-items: flex-end; background: #fff; }
.senden textarea { flex: 1; font: inherit; resize: none; max-height: 140px; padding: 11px 14px; border-radius: 12px; border: 1px solid var(--rand); background: #f7f8fa; outline: none; }
.senden textarea:focus { border-color: var(--rot); box-shadow: 0 0 0 3px rgba(200,22,29,.15); background: #fff; }
.rund { width: 44px; height: 44px; border-radius: 12px; display: grid; place-items: center; color: var(--text2); background: #f0f2f5; flex: none; }
.rund:hover { color: var(--rot); background: #fbeaea; }
.senden .haupt { height: 44px; flex: none; }
.chat .fehler { color: #b00020; padding: 0 18px 8px; margin: 0; background: #fff; }
.chat .fehler:empty { display: none; }

@media (max-width: 560px) {
  .karte { padding: 24px 20px 18px; }
  .chat { border: 0; }
  .liste { padding: 12px; }
  .senden { padding-left: 12px; padding-right: 12px; }
  .kopf-name span { display: none; }
}