:root {
  --turquoise: #14b8b2;
  --turquoise-dark: #0f8f8a;
  --bg: #f5fbfb;
  --panel: #ffffff;
  --text: #092033;
  --muted: #6b7b88;
  --line: #dfe9ee;
  --cream: #fff7e8;
  --danger: #dc2626;
  --ok: #16a34a;
  --orange: #f59e0b;
  --shadow: 0 18px 50px rgba(8, 45, 70, 0.13);
  --radius: 24px;
  font-family: system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
}

* { box-sizing: border-box; }
html, body { min-height: 100%; }
body {
  margin: 0;
  color: var(--text);
  background: linear-gradient(145deg, #f2fbfb 0%, #ffffff 48%, #f7fbff 100%);
}
a { color: inherit; text-decoration: none; }
button, input, textarea, select { font: inherit; }

.page-soft {
  display: grid;
  place-items: center;
  padding: 22px;
}

.login-card {
  width: min(440px, 100%);
  background: rgba(255,255,255,0.92);
  border: 1px solid rgba(20,184,178,0.2);
  border-radius: 32px;
  padding: 26px;
  box-shadow: var(--shadow);
  text-align: center;
}
.install-card { width: min(560px, 100%); }
.login-logo {
  width: min(250px, 74vw);
  height: auto;
  border-radius: 30px;
  display: block;
  margin: 0 auto 18px;
  box-shadow: 0 10px 28px rgba(0,0,0,0.12);
}
h1 { margin: 0 0 8px; font-size: clamp(1.6rem, 4vw, 2.25rem); letter-spacing: -0.03em; }
.muted { color: var(--muted); }
.small { font-size: 0.9rem; }

.form-stack { display: grid; gap: 14px; text-align: left; margin-top: 20px; }
label { display: grid; gap: 7px; font-weight: 700; }
input, textarea, select {
  border: 1px solid var(--line);
  background: #fff;
  border-radius: 16px;
  padding: 13px 14px;
  outline: none;
  color: var(--text);
}
input:focus, textarea:focus, select:focus {
  border-color: var(--turquoise);
  box-shadow: 0 0 0 4px rgba(20,184,178,0.15);
}
textarea { resize: vertical; min-height: 54px; }
.check { display: flex; align-items: center; gap: 8px; }
.check input { width: auto; }
.pin-form input { text-align: center; font-size: 1.6rem; letter-spacing: 0.2em; }

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  border: 1px solid var(--line);
  border-radius: 999px;
  background: #fff;
  color: var(--text);
  padding: 10px 16px;
  font-weight: 800;
  cursor: pointer;
  transition: transform .15s ease, box-shadow .15s ease, background .15s ease;
  white-space: nowrap;
}
.btn:hover { transform: translateY(-1px); box-shadow: 0 8px 18px rgba(8,45,70,0.1); }
.btn.primary { background: var(--turquoise); color: #fff; border-color: var(--turquoise); }
.btn.primary:hover { background: var(--turquoise-dark); }
.btn.danger { background: #fff; color: var(--danger); border-color: rgba(220,38,38,.35); }
.btn.special { border-color: rgba(245,158,11,.45); background: #fff7df; color: #7c4a03; }
.btn.tiny { padding: 7px 11px; font-size: 0.86rem; }
.btn.ok { background: var(--ok); color: #fff; border-color: var(--ok); }
.btn:disabled { opacity: .55; cursor: not-allowed; transform: none; box-shadow: none; }
.button-row, .composer-actions { display: flex; gap: 10px; flex-wrap: wrap; align-items: center; }
.inline-form { display: inline-flex; margin: 0; }

.notice {
  padding: 12px 14px;
  border-radius: 16px;
  margin: 14px 0;
  text-align: left;
  background: #ecfeff;
  border: 1px solid rgba(20,184,178,.3);
}
.notice.danger { background: #fff1f2; border-color: rgba(220,38,38,.25); color: #8a1020; }
.notice.success { background: #f0fdf4; border-color: rgba(22,163,74,.25); color: #14532d; }
.empty { color: var(--muted); text-align: center; padding: 34px; }

.topbar {
  position: sticky;
  top: 0;
  z-index: 10;
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 16px;
  padding: 12px clamp(14px, 3vw, 32px);
  background: rgba(255,255,255,.88);
  border-bottom: 1px solid var(--line);
  backdrop-filter: blur(14px);
}
.brand { display: flex; align-items: center; gap: 10px; font-weight: 900; }
.brand img { width: 42px; height: 42px; border-radius: 12px; }
.topbar nav { display: flex; gap: 10px; align-items: center; flex-wrap: wrap; justify-content: flex-end; }
.topbar nav a { color: var(--muted); font-weight: 800; }
.topbar nav a:hover { color: var(--text); }

.container {
  width: min(1120px, calc(100% - 28px));
  margin: 26px auto;
}
.container.narrow { width: min(620px, calc(100% - 28px)); }
.hero-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 16px;
  margin-bottom: 18px;
}
.panel {
  background: rgba(255,255,255,.94);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: clamp(16px, 3vw, 24px);
  box-shadow: 0 10px 28px rgba(8,45,70,.08);
}
.user-list { display: grid; gap: 12px; }
.user-card {
  display: flex;
  justify-content: space-between;
  gap: 16px;
  align-items: center;
  padding: 15px;
  border: 1px solid var(--line);
  border-radius: 20px;
  background: #fff;
}
.user-card.is-blocked { opacity: .72; }
.user-title { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }
.badge {
  display: inline-flex;
  border-radius: 999px;
  padding: 4px 9px;
  background: rgba(20,184,178,.13);
  color: var(--turquoise-dark);
  font-size: .78rem;
  font-weight: 900;
}
.badge.danger { background: #fee2e2; color: var(--danger); }
.actions { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; justify-content: flex-end; }
.table-wrap { overflow-x: auto; }
.log-table { width: 100%; border-collapse: collapse; font-size: .92rem; }
.log-table th, .log-table td { border-bottom: 1px solid var(--line); text-align: left; padding: 10px; vertical-align: top; }
.log-table th { color: var(--muted); }
code { background: #f1f5f9; border-radius: 8px; padding: 2px 6px; }

.chat-shell {
  min-height: 100vh;
  padding: clamp(10px, 2vw, 24px);
  display: grid;
  place-items: center;
}
.chat-card {
  width: min(920px, 100%);
  height: min(860px, calc(100vh - 28px));
  display: flex;
  flex-direction: column;
  background: linear-gradient(160deg, #eefdfc 0%, #fff6df 100%);
  border: 1px solid rgba(20,184,178,.22);
  border-radius: 30px;
  box-shadow: var(--shadow);
  overflow: hidden;
}
.admin-chat .chat-card { height: min(850px, calc(100vh - 98px)); }
.chat-header {
  display: flex;
  justify-content: space-between;
  gap: 12px;
  align-items: center;
  padding: 14px 16px;
  border-bottom: 1px solid rgba(20,184,178,.22);
  background: linear-gradient(90deg, #f1fffe, #e1faf8);
}
.chat-title-block { display: flex; align-items: center; gap: 12px; min-width: 0; }
.chat-logo-small { width: 56px; height: 56px; border-radius: 16px; flex: 0 0 auto; }
.chat-header h1 { margin: 0; font-size: clamp(1.15rem, 3vw, 1.55rem); }
.chat-header p { margin: 3px 0 0; color: var(--muted); font-size: .92rem; }
.header-actions { display: flex; gap: 8px; flex-wrap: wrap; justify-content: flex-end; }
.push-box {
  margin: 12px 16px 0;
  padding: 10px 12px;
  border: 1px solid rgba(20,184,178,.25);
  border-radius: 18px;
  background: #ecfeff;
  display: flex;
  justify-content: space-between;
  gap: 10px;
  align-items: center;
  color: #164e63;
  font-size: .92rem;
}
.messages {
  flex: 1;
  overflow-y: auto;
  padding: 18px clamp(12px, 3vw, 24px);
  background:
    radial-gradient(circle at top left, rgba(20,184,178,.20), transparent 40%),
    radial-gradient(circle at bottom right, rgba(245,158,11,.16), transparent 34%),
    linear-gradient(135deg, #e8fbfa 0%, #fff4dc 100%);
}
.msg { display: grid; margin: 10px 0; }
.msg.mine { justify-items: end; }
.msg.theirs { justify-items: start; }
.bubble {
  max-width: min(76%, 620px);
  padding: 12px 15px;
  border-radius: 22px;
  line-height: 1.42;
  box-shadow: 0 8px 18px rgba(8,45,70,.08);
  word-wrap: break-word;
  white-space: normal;
}
.mine .bubble {
  background: var(--turquoise);
  color: #fff;
  border-bottom-right-radius: 7px;
}
.theirs .bubble {
  background: var(--cream);
  color: var(--text);
  border: 1px solid rgba(231, 198, 125, .38);
  border-bottom-left-radius: 7px;
}
.meta {
  margin-top: 4px;
  color: var(--muted);
  font-size: .78rem;
  padding: 0 7px;
}
.composer {
  border-top: 1px solid rgba(20,184,178,.22);
  padding: 13px 14px 15px;
  display: grid;
  grid-template-columns: 1fr;
  gap: 11px;
  align-items: stretch;
  background: rgba(255,253,247,.96);
}
.composer textarea { max-height: 160px; width: 100%; }
.composer-actions {
  justify-content: center;
}
.composer .btn.primary[type="submit"] {
  width: min(66%, 440px);
  min-height: 54px;
  padding: 15px 24px;
  font-size: 1.06rem;
  border-radius: 20px;
}

@media (max-width: 760px) {
  .hero-row, .user-card, .chat-header, .push-box, .composer { flex-direction: column; align-items: stretch; }
  .user-card { align-items: stretch; }
  .actions { justify-content: flex-start; }
  .composer { display: flex; }
  .composer .btn.primary[type="submit"] { width: min(82%, 360px); }
  .bubble { max-width: 88%; }
  .topbar { align-items: flex-start; flex-direction: column; }
  .topbar nav { justify-content: flex-start; }
  .chat-card { height: calc(100vh - 20px); border-radius: 22px; }
  .login-logo { width: min(220px, 70vw); }
}

.lang-switch {
  text-align: center;
  margin: -4px 0 18px;
  font-weight: 800;
  font-size: 14px;
}
.lang-switch a {
  color: #64748b;
  text-decoration: none;
}
.lang-switch a.active {
  color: #0f766e;
}

/* v1.3: klarere Chatfarben und bessere Admin-Übersicht */
.msg.sender-admin .bubble {
  background: var(--turquoise);
  color: #fff;
  border: 1px solid rgba(15, 143, 138, .45);
}
.msg.sender-user .bubble {
  background: #e53935;
  color: #fff;
  border: 1px solid rgba(153, 27, 27, .35);
}
.msg.sender-user .meta,
.msg.sender-admin .meta {
  color: #5c6b78;
}
.user-card.has-unread {
  border-color: rgba(20,184,178,.55);
  background: linear-gradient(90deg, #effefd 0%, #ffffff 70%);
  box-shadow: 0 10px 24px rgba(20,184,178,.12);
}
.user-meta-block {
  display: grid;
  gap: 4px;
  margin-top: 6px;
  color: var(--muted);
  font-size: .92rem;
}
.last-chat-line {
  margin-top: 5px;
  color: var(--text);
  line-height: 1.45;
}
.last-chat-line strong {
  font-weight: 950;
}
.invite-panel {
  margin-top: 16px;
}
.invite-panel h2 {
  margin: 0 0 6px;
  font-size: 1.25rem;
}


/* v1.5: großer, daumenfreundlicher Senden-Button + Push nach Aktivierung nach unten */
.chat-header { order: 1; }
.push-box { order: 2; }
.messages { order: 3; }
.composer { order: 4; }
.push-box.push-active {
  order: 5;
  margin: 0 14px 12px;
  padding: 7px 10px;
  font-size: .78rem;
  background: rgba(240,253,250,.82);
  border-color: rgba(20,184,178,.18);
  color: #0f766e;
}
.push-box.push-active .btn {
  padding: 5px 10px;
  font-size: .78rem;
  min-height: 0;
}
.push-box.push-active div {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
@media (max-width: 760px) {
  .push-box.push-active {
    margin: 0 12px 10px;
    align-items: center;
  }
}

/* v1.8: Benachrichtigungs-Auswahl bei erster Anmeldung */
.choice-group {
  border: 1px solid rgba(20,184,178,.22);
  border-radius: 20px;
  padding: 14px;
  display: grid;
  gap: 10px;
  text-align: left;
  background: rgba(236,254,255,.55);
}
.choice-group legend {
  font-weight: 950;
  padding: 0 7px;
}
.choice-card {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 10px;
  align-items: start;
  padding: 11px;
  border: 1px solid rgba(15,118,110,.16);
  border-radius: 16px;
  background: rgba(255,255,255,.82);
  font-weight: 650;
}
.choice-card input {
  margin-top: 4px;
  width: auto;
}
.choice-card small {
  color: var(--muted);
  font-weight: 500;
  line-height: 1.35;
}

/* v2.0: übersichtliches Aktivitäts-Log */
.log-filters{display:flex;flex-wrap:wrap;gap:8px;margin:0 0 14px}.log-delete-row{display:flex;justify-content:flex-end;margin-bottom:14px}.log-cards{display:grid;gap:12px}.log-card{background:#fff;border:1px solid rgba(15,118,110,.16);border-radius:22px;padding:16px;box-shadow:0 8px 22px rgba(8,45,70,.07)}.log-actor{display:flex;align-items:center;gap:8px;font-size:1.02rem;margin-bottom:6px}.log-actor.admin{color:#0f766e}.log-actor.user{color:#b91c1c}.log-actor.system{color:#475569}.log-action{font-size:1.08rem;font-weight:900;margin-bottom:12px}.log-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:7px 18px;color:#334155}.log-detail{margin-top:12px;padding-top:10px;border-top:1px solid #e2e8f0;color:#64748b}.log-table{display:none}@media(max-width:700px){.log-grid{grid-template-columns:1fr}.log-filters .btn{flex:1 1 auto}.log-delete-row{justify-content:stretch}.log-delete-row form,.log-delete-row .btn{width:100%}}

/* v2.1: kompakte Log-Karten passend zur Chat-App */
.log-cards {
  display: grid;
  gap: 10px;
}
.log-card {
  position: relative;
  overflow: hidden;
  background: rgba(255,255,255,.96);
  border: 1px solid rgba(15,118,110,.14);
  border-left: 6px solid #94a3b8;
  border-radius: 18px;
  padding: 13px 15px 12px;
  box-shadow: 0 6px 18px rgba(8,45,70,.07);
}
.log-card.admin { border-left-color: #14b8b2; }
.log-card.user { border-left-color: #dc2626; }
.log-card.system { border-left-color: #64748b; }
.log-card.warning { background: linear-gradient(90deg, #fff7ed 0%, #ffffff 38%); border-left-color: #f97316; }
.log-card.push { background: linear-gradient(90deg, #f0fdf4 0%, #ffffff 38%); border-left-color: #16a34a; }
.log-card.message.admin { background: linear-gradient(90deg, #ecfeff 0%, #ffffff 42%); }
.log-card.message.user { background: linear-gradient(90deg, #fff1f2 0%, #ffffff 42%); }
.log-card-top {
  display: flex;
  justify-content: space-between;
  gap: 12px;
  align-items: center;
  margin-bottom: 6px;
}
.log-actor {
  margin: 0;
  min-width: 0;
  font-size: .98rem;
}
.log-time {
  flex: 0 0 auto;
  color: #64748b;
  font-size: .82rem;
  font-weight: 800;
  white-space: nowrap;
}
.log-action {
  margin: 0 0 9px;
  font-size: 1rem;
  line-height: 1.35;
  font-weight: 900;
  color: #0f172a;
}
.log-meta {
  display: flex;
  flex-wrap: wrap;
  gap: 5px 12px;
  color: #475569;
  font-size: .84rem;
  line-height: 1.35;
}
.log-meta span {
  min-width: 0;
  overflow-wrap: anywhere;
}
.log-detail { display: none !important; }
@media (max-width: 700px) {
  .log-card { padding: 12px 13px 11px; border-radius: 16px; }
  .log-card-top { align-items: flex-start; flex-direction: column; gap: 4px; }
  .log-time { font-size: .8rem; }
  .log-meta { display: grid; gap: 4px; }
}

.login-register-box{margin-top:18px;padding-top:16px;border-top:1px solid var(--line);text-align:center}.login-register-box .btn{display:inline-flex}


/* Version 2.6: Loginseite – saubere Breite, sichtbarer Sprachwechsel und Registrierung */
.login-card {
  width: min(500px, 100%);
}
.login-card .form-stack,
.login-card .form-stack label,
.login-card .form-stack input,
.login-card .btn.primary {
  width: 100%;
  min-width: 0;
}
.login-card .pin-form input {
  max-width: 100%;
  letter-spacing: .14em;
  font-size: clamp(1.15rem, 4.2vw, 1.55rem);
  overflow: hidden;
}
.login-lang-switch {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 12px;
  width: 100%;
  margin: 18px 0 22px;
}
.login-lang-switch .lang-tile {
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 52px;
  padding: 12px 16px;
  border-radius: 16px;
  color: #fff;
  font-size: 1.08rem;
  font-weight: 900;
  border: 3px solid transparent;
  box-shadow: 0 8px 18px rgba(8,45,70,.12);
  transition: transform .15s ease, box-shadow .15s ease, border-color .15s ease;
}
.login-lang-switch .lang-tile:hover {
  transform: translateY(-1px);
  box-shadow: 0 10px 22px rgba(8,45,70,.17);
}
.login-lang-switch .lang-de {
  background: linear-gradient(135deg, #111827, #334155);
}
.login-lang-switch .lang-ro {
  background: linear-gradient(135deg, #003da5, #f4c300);
  text-shadow: 0 1px 2px rgba(0,0,0,.35);
}
.login-lang-switch .lang-tile.active {
  border-color: var(--turquoise);
  box-shadow: 0 0 0 4px rgba(20,184,178,.18), 0 10px 22px rgba(8,45,70,.16);
}
.login-register-box {
  margin-top: 22px;
  padding-top: 20px;
}
.login-register-box .register-cta {
  display: flex;
  width: 100%;
  min-height: 58px;
  padding: 14px 20px;
  background: var(--danger);
  border-color: var(--danger);
  color: #fff;
  font-size: 1.12rem;
  font-weight: 900;
  box-shadow: 0 10px 24px rgba(220,38,38,.25);
}
.login-register-box .register-cta:hover {
  background: #b91c1c;
  border-color: #b91c1c;
  box-shadow: 0 12px 28px rgba(220,38,38,.32);
}
@media (max-width: 520px) {
  .page-soft { padding: 12px; }
  .login-card { padding: 20px 16px; border-radius: 26px; }
  .login-lang-switch { gap: 8px; }
  .login-lang-switch .lang-tile { min-height: 50px; padding: 10px 8px; font-size: 1rem; }
}

/* Version 2.7: besser lesbare Sprachkacheln und kräftigere Hinweistexte */
.login-lang-switch .lang-de {
  background: linear-gradient(135deg, #0f766e, #14b8a6);
  color: #ffffff;
  text-shadow: none;
}
.login-lang-switch .lang-ro {
  background: linear-gradient(135deg, #1d4ed8, #2563eb);
  color: #ffffff;
  text-shadow: none;
}
.login-lang-switch .lang-tile.active {
  border-color: #fbbf24;
  box-shadow: 0 0 0 4px rgba(251,191,36,.24), 0 10px 22px rgba(8,45,70,.16);
}
.login-card > .muted,
.login-card .pin-form > .muted.small,
.login-register-box > .muted.small {
  color: #334155;
  font-weight: 800;
  line-height: 1.45;
}
.login-card > .muted {
  font-size: 1.02rem;
  margin-top: 12px;
}
.login-card .pin-form > .muted.small {
  font-size: .98rem;
  margin: 4px 0 2px;
}
.login-register-box > .muted.small {
  font-size: 1rem;
  margin: 0 0 12px;
}

/* Version 2.8: Deutsche Sprachkachel rot mit weisser Schrift */
.login-lang-switch .lang-de {
  background: linear-gradient(135deg, #dc2626, #ef4444);
  color: #ffffff;
  text-shadow: none;
}

/* Version 2.9: Deutsche Sprachkachel garantiert mit weisser Schrift */
.login-lang-switch .lang-de,
.login-lang-switch .lang-de:link,
.login-lang-switch .lang-de:visited,
.login-lang-switch .lang-de:hover,
.login-lang-switch .lang-de:active,
.login-lang-switch .lang-de * {
  color: #ffffff !important;
  -webkit-text-fill-color: #ffffff !important;
  text-shadow: none !important;
}

/* Version 3.1: Bildversand und Vorschau */
.photo-actions{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px}.photo-action{cursor:pointer;justify-content:center;background:#fff;border:2px solid rgba(20,184,178,.35);color:#0f766e;font-weight:900}.photo-action:hover{background:#ecfeff}.photo-action.disabled{pointer-events:none;opacity:.55}.image-preview{display:flex;align-items:center;gap:12px;padding:10px;border:1px solid rgba(20,184,178,.25);border-radius:16px;background:#f0fdfa}.image-preview img{width:76px;height:76px;object-fit:cover;border-radius:12px;border:1px solid rgba(15,118,110,.2)}.image-preview strong{display:inline-block;max-width:260px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.bubble.has-image{padding:5px;overflow:hidden}.bubble.has-image .bubble-text{padding:8px 10px 9px}.chat-image-button{display:block;border:0;padding:0;margin:0;background:transparent;cursor:zoom-in;border-radius:15px;overflow:hidden;max-width:min(360px,72vw)}.chat-image{display:block;width:100%;max-height:420px;object-fit:contain;background:rgba(255,255,255,.18)}.image-lightbox{position:fixed;inset:0;z-index:9999;background:rgba(2,6,23,.94);display:flex;flex-direction:column;align-items:center;justify-content:center;padding:20px;cursor:zoom-out}.image-lightbox[hidden]{display:none}.image-lightbox img{max-width:96vw;max-height:88vh;object-fit:contain;border-radius:12px}.image-lightbox span{color:#fff;margin-top:12px;font-weight:800}.lightbox-open{overflow:hidden}@media(max-width:520px){.photo-actions{grid-template-columns:1fr 1fr}.photo-action{padding:11px 6px;font-size:.92rem}.chat-image-button{max-width:76vw}}

/* Version 3.1: Backup-Verwaltung */
.backup-card{max-width:850px;margin:24px auto}.backup-actions{display:flex;flex-wrap:wrap;gap:10px;margin:16px 0}.backup-list{display:grid;gap:10px;margin-top:18px}.backup-item{display:flex;align-items:center;justify-content:space-between;gap:14px;padding:14px;border:1px solid rgba(15,118,110,.16);border-radius:16px;background:#fff}.backup-meta{color:var(--muted);font-size:.9rem;margin-top:4px}@media(max-width:650px){.backup-item{align-items:stretch;flex-direction:column}.backup-item .actions{justify-content:stretch}.backup-item .btn{flex:1}}