/* index.min.css — nur index.php (Hero grün, smooth/pill, keine Shadows im First-Screen) */

:root{
  /* Grün wie vorher (freundlich, ruhig, nicht neon) */
  --yui-green-1:#d9e6d4;
  --yui-green-2:#d9e6d4;
  --yui-green-3:#d9e6d4;

  --yui-on-green:#333333;
  --yui-on-green-muted:#333333aa;

  --yui-border-soft:rgba(255,255,255,.22);
  --yui-glass:rgba(255,255,255,.10);
  --yui-glass-strong:rgba(255,255,255,.14);

  --yui-pill-radius:999px;
}

/* Hintergrund der Startseite */
body.yui-body{
  background:radial-gradient(1200px 700px at 20% 15%, rgba(255,255,255,.10) 0%, rgba(255,255,255,0) 55%),
             linear-gradient(180deg, var(--yui-green-1) 0%, var(--yui-green-2) 65%, var(--yui-green-3) 100%);
  color:var(--yui-on-green);
}

/* Header oben (Feedback + Sprache) */
body.yui-body .header-bar{
  max-width:1100px;
  margin:0 auto;
  padding:12px 14px;
}

body.yui-body .lang-select{
  border:1px solid var(--yui-border-soft);
  background:#fff;
  color:var(--yui-on-green);
  border-radius:var(--yui-pill-radius);
  font-weight:800;
  cursor:pointer;
}
body.yui-body .lang-select option{
  color:#111827;
}

body.yui-body .app-main{
  max-width:1100px;
  margin:0 auto;
  padding:0 14px 24px;
}

.mode-switch{ display:flex; gap:10px; flex-wrap:wrap; justify-content: center; margin-top: 2em; margin-bottom: 2em;}

.pref-lang {
  margin-top: 2em;
  margin-bottom: 2em;
  display: flex;
  justify-content: center;
  align-items: center;
  flex-direction: column;  
}

.name-plain-panel {
  display: flex;
  justify-content: center;
  align-items: center;
  flex-direction: column;  
}

/* Buttons: pilliger + pointer überall */
body.yui-body button,
body.yui-body a,
body.yui-body .option-btn,
body.yui-body .mode-btn{
  cursor:pointer;
}

body.yui-body .btn,
body.yui-body .btn-primary,
body.yui-body .btn-secondary,
body.yui-body .btn-accent,
body.yui-body .btn-small{
  border-radius:var(--yui-pill-radius);
}

/* HERO: direkt auf grün, ohne Card/Shadow/Box */
body.yui-body #screen-hero .hero{
  background:transparent !important;
  border:none !important;
  box-shadow:none !important;
  padding:26px 10px 18px;
}

body.yui-body #screen-hero .hero-logo{
  width:300px;
  height:auto;
  border-radius:18px;
}

body.yui-body #screen-hero h1{
  color:var(--yui-on-green);
  letter-spacing:.2px;
  margin:14px 0 10px;
}

body.yui-body #screen-hero p{
  color:var(--yui-on-green-muted);
  margin:0 auto;
  max-width:720px;
  line-height:1.45;
}

body.yui-body #screen-hero .hero-actions{
  margin-top:2em;
  margin-bottom:2em;
}

body.yui-body #screen-hero .hero-imprint{
  color:var(--yui-on-green-muted);
  opacity:.95;
  max-width:600px;
}

/* Buttons auf grün: smooth, keine harten Box-Effekte */
body.yui-body #screen-hero .btn-primary,
body.yui-body #screen-hero .btn-accent{
  background:#de8369;
  border-color:#c06850;
  color:#ffffff;
  font-weight:700;
}
body.yui-body #screen-hero .btn-primary:hover,
body.yui-body #screen-hero .btn-accent:hover{
  background:#c06850;
  border-color:#de8369;
}

body.yui-body #screen-hero .btn-secondary{
  background:#617073;
  border-color:#4d6367;
  color:#ffffff;
  font-weight:700;
}
body.yui-body #screen-hero .btn-secondary:hover{
  background:#4d6367;
  border-color:#617073;
}

/* Keine Schatten/Box-Shadows auf Startseite (außer Wizard) */
body.yui-body .card{
  box-shadow:none !important;
}
body.yui-body .modal,
body.yui-body .prototype-modal{
  box-shadow:none !important;
}

/* Wizard darf als „Karte“ wirken */
body.yui-body #screen-create .wizard-step{
  background:#ffffff;
  color:#111827;
  border:1px solid rgba(0,0,0,.08);
  border-radius:18px;
  box-shadow:0 18px 40px rgba(0,0,0,.18); /* Wizard = okay */
}

body.yui-body #screen-create .wizard-step h2{
  color:#111827;
}

body.yui-body #screen-create .field-hint{
  color:#6b7280;
  margin:0 auto 0 auto;
}

/* Option-Buttons im Wizard: etwas smoother/pilliger */
body.yui-body #screen-create .option-btn{
  border-radius:16px;
  transition:transform .06s ease, border-color .12s ease, background .12s ease;
}
body.yui-body #screen-create .option-btn:hover{
  background:#eee;
}
body.yui-body #screen-create .option-btn.selected{
  border-color:#D97D54;
  box-shadow:0 0 0 3px rgba(217,125,84,.18);
}

/* Join-Screen: lesbar auf grün, ohne Shadows */
body.yui-body #screen-join{
  color:var(--yui-on-green);
}
body.yui-body #screen-join .join-sub{
  color:var(--yui-on-green-muted);
}
body.yui-body #screen-join .empty-state{
  background:rgba(255,255,255,.10);
  border:1px dashed var(--yui-border-soft);
  color:var(--yui-on-green-muted);
}
body.yui-body #screen-join .card{
  background:#fff;
  border:1px solid var(--yui-border-soft);
  color:var(--yui-on-green);
}
body.yui-body #screen-join .badge{
  background:rgba(255,255,255,.12);
  border-color:var(--yui-border-soft);
  color:var(--yui-on-green);
}
body.yui-body #screen-join small{
  color:var(--yui-on-green-muted);
}

/* Join-Modal etwas „glassig“, ohne Shadow */
body.yui-body .modal-backdrop .modal{
  background:rgba(255,255,255,.96);
  border:1px solid rgba(0,0,0,.08);
}

/* Responsiv */
@media (max-width:560px){
  body.yui-body #screen-hero .hero{
    padding-top:22px;
  }
  body.yui-body #screen-hero p{
    padding:0 6px;
  }
}