/* ==========================================================================
   Restaurant Tafelspitz – Reservierung (Embed / iframe)
   Kompakt, ohne Seitenchrome. Zielgröße ~600 x 650.
   CI: Schwarz #000, Gold #D7B56D, Grün #0A6131.
   ========================================================================== */

:root{
  --gold:#D7B56D; --gold-dk:#b9974f; --black:#000; --green:#0A6131;
  --grey:#D5D5D5; --muted:#6b6b6b; --text:#1a1a1a; --bad:#c0392b;
}
*{box-sizing:border-box;}
html,body{margin:0;padding:0;}
body{
  font-family:'Montserrat',-apple-system,Segoe UI,Roboto,Arial,sans-serif;
  color:var(--text); background:transparent; font-size:14px; line-height:1.45;
}
.embed{max-width:600px;margin:0 auto;padding:14px 16px;}

/* Felder */
.row{display:flex;gap:10px;}
.row .fld{flex:1;}
.fld{display:flex;flex-direction:column;margin-bottom:10px;}
.fld label{font-size:10.5px;font-weight:600;letter-spacing:.05em;text-transform:uppercase;color:var(--muted);margin-bottom:4px;}
.fld input,.fld select{
  font-family:inherit;font-size:14px;color:var(--text);
  padding:9px 10px;border:1px solid var(--grey);border-radius:6px;background:#fff;width:100%;
  transition:border-color .15s,box-shadow .15s;
}
.fld input:focus,.fld select:focus{outline:none;border-color:var(--gold);box-shadow:0 0 0 3px rgba(215,181,109,.22);}
.fld select:disabled{background:#f4f4f4;color:#999;cursor:not-allowed;}
.fld-persons{max-width:88px;}
.bad{border-color:var(--bad)!important;background:#fdf3f2;}
.err{color:var(--bad);font-size:11.5px;margin-top:3px;display:block;}

/* Bereich – Ring-Auswahl */
.area{display:grid;grid-template-columns:1fr 1fr;gap:10px;margin-bottom:10px;}
.area-opt{position:relative;cursor:pointer;display:block;}
.area-opt input{position:absolute;opacity:0;inset:0;cursor:pointer;}
.ring{
  display:flex;align-items:center;justify-content:center;gap:8px;
  padding:12px 10px;border:2px solid var(--grey);border-radius:8px;background:#fafafa;
  transition:border-color .18s,background .18s,box-shadow .18s;
}
.ring-l{font-size:13px;font-weight:600;color:var(--text);}
.area-opt:hover .ring{border-color:var(--gold);}
.area-opt input:checked + .ring{border-color:var(--gold);background:#fff;box-shadow:0 0 0 3px rgba(215,181,109,.25);}
.area-opt input:focus-visible + .ring{box-shadow:0 0 0 3px rgba(215,181,109,.45);}

/* Hinweis */
.hint{font-size:12px;color:var(--muted);background:#faf6ec;border-left:3px solid var(--gold);
  padding:8px 11px;border-radius:4px;margin:2px 0 10px;}
.hint.warn{background:#f4faf1;border-left-color:var(--green);color:#2f5d3f;}
.hint.full{background:#fdecea;border-left-color:var(--bad);color:#a5281b;}

/* Alert */
.alert{background:#fdecea;color:#a5281b;border:1px solid #f3c3bd;padding:9px 12px;border-radius:6px;
  font-size:13px;margin-bottom:12px;}

/* Button */
.btn{display:block;width:100%;cursor:pointer;border:none;font-family:inherit;font-weight:600;
  letter-spacing:.08em;text-transform:uppercase;font-size:13px;border-radius:6px;
  background:var(--black);color:#fff;padding:13px;transition:background .2s,color .2s;}
.btn:hover{background:var(--gold);color:var(--black);}
.btn:disabled{background:#bbb;color:#eee;cursor:not-allowed;}
.btn.ghost{background:transparent;color:var(--gold-dk);border:1px solid var(--gold);margin-top:14px;text-decoration:none;text-align:center;}
.btn.ghost:hover{background:var(--gold);color:var(--black);}

/* Ergebnis */
.result{text-align:center;padding:24px 14px;}
.result-icon{width:60px;height:60px;border-radius:50%;display:flex;align-items:center;justify-content:center;
  font-size:28px;margin:0 auto 14px;}
.result.ok .result-icon{background:#e7f4ec;color:var(--green);}
.result.wait .result-icon{background:#faf6ec;color:var(--gold-dk);}
.result h2{font-size:19px;margin:0 0 8px;color:var(--black);}
.result p{font-size:14px;color:#444;margin:0 auto 8px;max-width:440px;}
.result .ref{color:var(--muted);font-size:13px;}

/* Sprachumschalter (DE / EN) */
.lang-switch{display:flex;justify-content:flex-end;gap:2px;margin:-4px 0 6px;}
.lang-switch a{font-size:11px;font-weight:600;letter-spacing:.06em;color:var(--muted);text-decoration:none;
  padding:3px 8px;border-radius:12px;border:1px solid transparent;transition:color .15s,border-color .15s;}
.lang-switch a:hover{color:var(--black);border-color:var(--grey);}
.lang-switch a.active{color:var(--black);border-color:var(--gold);background:#fff;}
.lang-switch a:focus-visible{outline:none;box-shadow:0 0 0 3px rgba(215,181,109,.35);}