/* custom.min.css — global/shared (index.php, join.php, allgemein). Chat-spezifisches liegt in chat.min.css */
:root{
  --yui-bg:#f6f7fb;
  --yui-card:#ffffff;
  --yui-text:#111827;
  --yui-muted:#6b7280;
  --yui-border:#e5e7eb;
  --yui-primary:#D97D54;
  --yui-primary-dark:#c96c42;
  --yui-shadow:0 10px 30px rgba(0,0,0,.08);
}

*{ box-sizing:border-box; }
html,body{ margin:0; padding:0; }
body{
  font-family:system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;
  background:var(--yui-bg);
  color:var(--yui-text);
}

/* Buttons */
.btn,.btn-primary,.btn-secondary,.btn-accent,.btn-small{
  appearance:none;
  border:1px solid transparent;
  cursor:pointer;
  text-decoration:none;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:8px;
  line-height:1;
  user-select:none;
  transition:transform .06s ease, background .12s ease, border-color .12s ease, opacity .12s ease;
}
.btn:active,.btn-primary:active,.btn-secondary:active,.btn-accent:active,.btn-small:active{ transform:translateY(1px); }

.btn{
  background:#fff;
  border-color:var(--yui-border);
  color:var(--yui-text);
  border-radius:999px;
  padding:10px 14px;
  font-weight:600;
}
.btn-primary,.btn-accent{
  background:var(--yui-primary);
  border-color:var(--yui-primary);
  color:#fff;
  border-radius:999px;
  padding:12px 16px;
  font-weight:800;
}
.btn-primary:hover,.btn-accent:hover{ background:var(--yui-primary-dark); border-color:var(--yui-primary-dark); }
.btn-secondary{
  background:#fff;
  border-color:var(--yui-border);
  color:var(--yui-text);
  border-radius:999px;
  padding:12px 16px;
  font-weight:700;
}
.btn-small{
  background:#fff;
  border-color:var(--yui-border);
  color:var(--yui-text);
  border-radius:999px;
  padding:8px 12px;
  font-weight:700;
  font-size:.92rem;
}

.btn:disabled,.btn-primary:disabled,.btn-secondary:disabled,.btn-accent:disabled,.btn-small:disabled{
  opacity:.55;
  cursor:default;
  transform:none;
}

/* Header bar */
.header-bar{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:10px;
  padding:12px 14px;
  max-width:1100px;
  margin:0 auto;
}
.lang-select{
  border:1px solid var(--yui-border);
  background:#fff;
  border-radius:999px;
  padding:10px 12px;
  font-weight:700;
}

/* Screens / Layout */
.app-main{ max-width:1100px; margin:0 auto; padding:0 14px 24px; }
.yui-screen{ display:none; }
.yui-screen.active{ display:block; }
.screen-inner{ padding:14px 0; }

/* Hero */
.hero{
  background:var(--yui-card);
  border:1px solid var(--yui-border);
  border-radius:18px;
  box-shadow:var(--yui-shadow);
  padding:20px 18px;
  text-align:center;
}
.hero-logo{ width:88px; height:auto; border-radius:14px; }
.hero-actions{ display:flex; gap:12px; justify-content:center; flex-wrap:wrap; margin-top:12px; }
.hero-imprint{ display:inline-block; margin-top:14px; color:var(--yui-muted); text-decoration:none; font-size:.92rem;}
.hero-desc{text-align:left;}

/* Wizard */
.wizard-step{
  background:var(--yui-card);
  border:1px solid var(--yui-border);
  border-radius:18px;
  box-shadow:var(--yui-shadow);
  padding:18px;
}
.wizard-pane{ display:none; }
.wizard-pane.active{ display:block; }
.options{ display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:10px; margin-top:10px; }
.option-btn{
  background:#fff;
  border:1px solid var(--yui-border);
  border-radius:14px;
  padding:12px 12px;
  text-align:left;
  font-weight:700;
}
.option-btn.selected{ border-color:var(--yui-primary); box-shadow:0 0 0 3px rgba(217,125,84,.18); }
.wizard-input-group{ margin-top:12px; text-align:left; }
.wizard-input-group input,.wizard-input-group textarea,.wizard-input-group select{
  width:100%;
  border:1px solid var(--yui-border);
  border-radius:14px;
  padding:12px 12px;
  background:#fff;
  font:inherit;
}
.field-hint{ display:block; margin-top:6px; color:var(--yui-muted); font-size:.85rem; }
.checkbox-label{ display:flex; align-items:center; gap:10px; font-weight:700; }
.mode-switch{ display:flex; gap:10px; flex-wrap:wrap; }
.mode-btn{
  background:#fff;
  border:1px solid var(--yui-border);
  border-radius:999px;
  padding:10px 12px;
  font-weight:800;
}
.mode-btn.active{ border-color:var(--yui-primary); box-shadow:0 0 0 3px rgba(217,125,84,.18); }
.wizard-footer{
  margin-top:14px;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:12px;
}
.wizard-footer-right{ display:flex; gap:10px; }
.wizard-message{ margin-top:10px; min-height:1.2em; font-weight:700; }
.wizard-message.success{ color:#2f855a; }
.wizard-message.error{ color:#c05621; }

/* Join grid/cards */
.join-header{ text-align:left; margin-bottom:10px; }
.join-sub{ color:var(--yui-muted); margin-top:6px; }
.join-section{ margin-top:18px; }
.grid-title{ margin:0 0 10px 0; font-size:1.05rem; }
.session-grid{ display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:12px; }
.card{
  background:var(--yui-card);
  border:1px solid var(--yui-border);
  border-radius:18px;
  box-shadow:var(--yui-shadow);
  padding:14px;
}
.card-own{ border-color:rgba(217,125,84,.55); }
.card-header{ display:flex; align-items:center; justify-content:space-between; gap:10px; margin-bottom:8px; }
.badge{
  display:inline-flex;
  align-items:center;
  border:1px solid var(--yui-border);
  background:#fff;
  border-radius:999px;
  padding:6px 10px;
  font-size:.82rem;
  font-weight:800;
  color:#374151;
}
.card-footer{ margin-top:10px; display:flex; align-items:center; justify-content:space-between; gap:10px; }

.empty-state{
  background:#fff;
  border:1px dashed var(--yui-border);
  border-radius:16px;
  padding:14px;
  color:var(--yui-muted);
}

/* Modal */
.modal-backdrop{
  position:fixed; inset:0;
  background:rgba(0,0,0,.45);
  display:none;
  align-items:center;
  justify-content:center;
  z-index:1500;
}
.modal-backdrop.active{ display:flex; }
.modal{
  width:min(520px,calc(100% - 24px));
  background:#fff;
  border-radius:18px;
  box-shadow:0 20px 50px rgba(0,0,0,.25);
  padding:18px;
}
.modal-actions{ display:flex; justify-content:flex-end; gap:10px; margin-top:12px; }

/* Prototype overlay */
.prototype-backdrop{
  position:fixed; inset:0;
  background:rgba(0,0,0,.55);
  display:none;
  align-items:center;
  justify-content:center;
  z-index:1600;
}
.prototype-backdrop.active{ display:flex; }
.prototype-modal{
  width:min(560px,calc(100% - 24px));
  background:#fff;
  border-radius:18px;
  padding:18px;
  box-shadow:0 20px 50px rgba(0,0,0,.25);
}
.hidden{ display:none !important; }
.text-center{ text-align:center; }
.p-5{ padding:18px; }

@media (max-width:920px){
  .session-grid{ grid-template-columns:repeat(2,minmax(0,1fr)); }
}
@media (max-width:560px){
  .header-bar{ padding:10px 10px; }
  .app-main{ padding:0 10px 20px; }
  .options{ grid-template-columns:1fr; }
  .session-grid{ grid-template-columns:1fr; }
}