/* ==========================================================================
   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(--green);color:var(--gold);padding:13px;transition:background .2s,color .2s;}
.btn:hover{background:#084d27;color:var(--gold);}
.btn:active{transform:translateY(1px);}
.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);}

/* ------------------------------ Handy ------------------------------ */
/* Greift nach der iframe-Breite: am Handy ist das iframe so schmal wie der Bildschirm. */
@media (max-width: 520px) {
  .embed{padding:12px 12px 16px;}
  .row{gap:8px;}
  .row .fld{min-width:0;}
  /* Telefon + E-Mail untereinander (E-Mail-Adressen sind lang) */
  .row-contact{flex-direction:column;gap:0;}
  /* Datum über die ganze Breite, darunter Uhrzeit + Personen */
  .row-when{display:grid;grid-template-columns:minmax(0,1fr) 96px;column-gap:8px;}
  .row-when .fld:first-child{grid-column:1 / -1;}
  .fld-persons{max-width:none;}
  /* iOS zoomt bei Feldern unter 16px automatisch hinein */
  .fld input,.fld select{font-size:16px;padding:10px;min-height:44px;}
  .fld input[type=date]{-webkit-appearance:none;appearance:none;min-width:0;text-align:left;}
  .fld input[type=date]::-webkit-date-and-time-value{text-align:left;}
  .fld label{font-size:10.5px;}
  .ring{padding:11px 6px;}
  .ring-l{font-size:12.5px;text-align:center;}
  .btn{font-size:14px;padding:15px 12px;}
  .hint{font-size:12.5px;}
}
/* Sehr schmale Geräte: auch Vor-/Nachname untereinander */
@media (max-width: 340px) {
  .row-name{flex-direction:column;gap:0;}
}

/* Datenschutz-Zustimmung (Pflicht-Checkbox) */
.consent{display:flex;align-items:flex-start;gap:10px;cursor:pointer;font-size:12.5px;line-height:1.45;
  color:#444;margin:4px 0 12px;padding:8px 10px;border:1px solid transparent;border-radius:6px;}
.consent input{flex-shrink:0;width:18px;height:18px;margin:1px 0 0;accent-color:var(--green);cursor:pointer;}
.consent a{color:var(--green);font-weight:600;text-decoration:underline;}
.consent.bad{border-color:var(--bad);background:#fdf3f2;}
.err-consent{margin:-8px 0 10px;}
@media (max-width: 520px){
  .consent{font-size:13px;padding:8px 6px;}
  .consent input{width:22px;height:22px;}
}