/* Wirtshaus.Cloud – Auth UI (LIGHT, mobile-first) */
:root{
  --bg:#fffdfa;           /* leicht warmes Off-White (wie Startseite) */
  --paper:#ffffff;        /* Karten-Hintergrund */
  --ink:#1c1c1c;          /* Haupttext */
  --muted:#616161;        /* Sekundärtext */
  --brand:#1f5d42;        /* Marken-Grün */
  --brand-ink:#0f3a29;    /* dunkles Grün */
  --accent:#f3b43a;       /* Akzent */
  --err:#b00020;          /* Fehlermeldungen */
  --ok:#1b8f5a;           /* OK/Success */
  --border:#e8e2d7;       /* zarte Kante */
  --radius:16px;
  --shadow:0 10px 30px rgba(0,0,0,.08);
  --header-h: 68px;
}
*{box-sizing:border-box}
html,body{
  margin:0;padding:0;background:
    radial-gradient(80vw 50vh at 10% -10%, #fff4d6 0%, transparent 40%),
    radial-gradient(60vw 50vh at 100% -20%, #e8fff2 0%, transparent 35%),
    var(--bg);
  color:var(--ink);
  font:16px/1.45 system-ui,-apple-system,Segoe UI,Roboto,Ubuntu,"Helvetica Neue",Arial;
}
a{color:var(--brand);text-decoration:none}
a:hover{text-decoration:underline}

/* Header / Brand */
.header{max-width:960px;margin:22px auto 0;padding:0 16px;display:flex;justify-content:center}
.brand{
  display:flex;align-items:center;gap:10px;padding:10px 12px;border-radius:999px;
  background:#ffffffcc;border:1px solid var(--border);backdrop-filter:saturate(120%) blur(6px)
}
.brand .logo{
  width:28px;height:28px;border-radius:10px;
  background:conic-gradient(from 210deg,var(--brand),#2a7b5a 40%,#4dbf91 60%,var(--accent) 95%);
  box-shadow:inset 0 0 0 2px #ffffff, 0 6px 18px #1f5d4214
}
.brand span{font-weight:700;letter-spacing:.2px}

/* Layout */
.wrapper{
  display:block;
  padding:18px 22px 24px;
}

@media (min-width:900px){
  .wrapper{
    min-height:calc(100svh - var(--header-h));
    display:grid;
    place-items:center;
  }
}
.card{
  width:100%;max-width:520px;background:var(--paper);border:1px solid var(--border);
  border-radius:var(--radius);box-shadow:var(--shadow);padding:22px
}
.card h1{margin:6px 0 2px;font-size:clamp(20px,4.5vw,26px);line-height:1.15}
.card p.lead{margin:0 0 14px;color:var(--muted);font-size:14px}

/* Form */
.form{display:grid;gap:12px;margin-top:6px}
.label{font-weight:600;font-size:14px}
.input{
  width:100%;padding:12px 14px;border-radius:12px;background:#fff;
  border:1px solid var(--border);color:var(--ink);outline:none
}
.input:focus{
  border-color:var(--brand);
  box-shadow:0 0 0 3px #1f5d4230
}

.row{display:flex;gap:10px;flex-wrap:wrap;align-items:center}
.btn{
  display:inline-flex;justify-content:center;align-items:center;gap:8px;
  padding:12px 14px;border-radius:12px;border:1px solid transparent;
  background:var(--brand);color:#fff;font-weight:700;cursor:pointer
}
.btn:hover{filter:brightness(1.06)}
.btn.outline{background:transparent;color:var(--brand);border-color:var(--brand)}
.btn.full{width:100%}
.meta{display:flex;justify-content:space-between;gap:10px;flex-wrap:wrap;color:var(--muted);font-size:13px}

.msg{
  padding:12px;border-radius:12px;background:#fff6f6;border:1px solid #ffc8c8;color:var(--err)
}
.msg.ok{background:#f0fff6;border-color:#bfe9d4;color:var(--ok)}

.small{font-size:12px;color:var(--muted)}
hr.sep{height:1px;border:none;background:var(--border);margin:12px 0}

/* Pills / Badges */
.pill{
  display:inline-flex;gap:8px;align-items:center;font-size:12px;padding:6px 10px;
  border-radius:999px;border:1px solid var(--border);background:#fff;color:var(--muted)
}

/* Password toggle */
.input-wrap{position:relative}
.input-wrap .toggle{
  position:absolute;right:10px;top:50%;translate:0 -50%;
  background:transparent;border:none;color:var(--brand);cursor:pointer;font-size:13px;padding:6px;border-radius:8px;
}
.input-wrap .toggle:hover{background:#1f5d420f}

/* Radio group */
.radios{
  display:grid;gap:8px;background:#fff;border:1px solid var(--border);padding:10px;border-radius:12px
}
.radios label{display:flex;gap:10px;align-items:center}

/* Footer */
.footer{max-width:960px;margin:10px auto 24px;padding:0 16px;color:var(--muted);font-size:13px;text-align:center}

/* Mobile */
@media (max-width:520px){
  .card{padding:18px}
  .btn{padding:12px}
}

/* --- Beta/Info Notice (Startseite) --- */
.notice {
  position: relative;
  display: flex; align-items: flex-start; gap: 12px;
  background: linear-gradient(180deg, #fff6dc, #ffffff);
  border: 1px solid var(--border);
  border-left: 6px solid var(--accent);
  border-radius: 14px;
  padding: 14px 16px;
  box-shadow: var(--shadow);
  margin: 16px 0 22px;
}
.notice .icon { font-size: 22px; line-height: 1; }
.notice h3 { margin: 0 0 4px; font-size: 18px; line-height: 1.2; }
.notice p { margin: 0; color: var(--muted); }
.notice .actions { display: flex; gap: 8px; flex-wrap: wrap; margin-top: 10px; }

.n-btn {
  display: inline-flex; align-items: center; justify-content: center;
  padding: 10px 14px; border-radius: 12px; border: 1px solid transparent;
  font-weight: 700; text-decoration: none; white-space: nowrap;
}
.n-btn.primary { background: var(--brand); color: #fff; border-color: var(--brand); }
.n-btn.outline { background: #fff; color: var(--brand); border-color: var(--brand); }

.notice .close {
  position: absolute; top: 8px; right: 8px;
  background: transparent; border: 1px solid var(--border);
  border-radius: 10px; padding: 4px 8px; cursor: pointer; color: var(--muted);
}
.notice .close:hover { background: #00000008; color: var(--ink); }

@media (max-width: 640px) {
  .notice { flex-direction: column; }
}