/* ===================================================================
   Zentrales Stylesheet – Adler-Lounge Gutschein-App (gs1)
   Pfad: /gs1/public/assets/css/main.css
   CSP-konform: KEINE Inline-Styles/-Scripts nötig
   =================================================================== */

/* --------- Reset & Grundfarben ------------------------------------ */
*,*::before,*::after { box-sizing:border-box; margin:0; padding:0; }

:root{
  --bg          : #faf9f7;
  --text        : #2c2c2c;
  --gold        : #94754b;
  --gold-dark   : #7d633f;
  --white       : #ffffff;
  --radius      : 12px;
  --shadow      : 0 4px 14px rgba(0,0,0,.08);
  --ff-base     : system-ui, -apple-system, "Segoe UI", Roboto, Arial, "Noto Sans", "Helvetica Neue", sans-serif;
  --ff-head     : "Playfair Display", Georgia, serif;
}

/* --------- Grundlayout -------------------------------------------- */
html,body { height:100%; }

body{
  font: 400 16px/1.55 var(--ff-base);
  background:var(--bg);
  color:var(--text);
  display:flex;
  align-items:center;
  justify-content:center;
  padding:1.5rem;
}

/* Kleinere Phones */
@media (max-width:400px){
  body{ font-size:17px; line-height:1.65; }
}

/* --------- Karten-Container --------------------------------------- */
.card{
  background:var(--white);
  padding:2.5rem 2rem;
  border-radius:var(--radius);
  box-shadow:var(--shadow);
  text-align:center;
}
.card--narrow{ max-width:360px; margin-inline:auto; }
@media (min-width:500px){ .card--narrow{ max-width:400px; } }

/* --------- Typografie --------------------------------------------- */
h1.card-title{
  font:700 1.55rem/1.25 var(--ff-head);
  text-transform:uppercase;
  letter-spacing:.04em;
  word-break:break-word;
  margin-bottom:1.4rem;
}
h2{ font:600 1.2rem/1.25 var(--ff-base); margin:.2rem 0 .8rem }
p.muted{ color:#666; font-size:.92rem }

/* --------- Buttons ------------------------------------------------- */
.btn,
.btn-gold{
  display:inline-block;
  border:2px solid var(--gold);
  color:var(--gold);
  background:transparent;
  padding:.75rem 2rem;
  font-size:1rem;
  border-radius:30px;
  text-decoration:none;
  cursor:pointer;
  transition:.25s;
}
.btn:hover,
.btn-gold:hover{
  background:var(--gold);
  color:var(--white);
  border-color:var(--gold-dark);
}
.btn.block{ display:block; width:100% }
.btn.sm   { padding:.55rem 1.2rem; font-size:.95rem }

/* Tastatur-Fokus sichtbar */
.btn:focus-visible,
.print-btn:focus-visible,
a:focus-visible{
  outline: 3px solid rgba(148,117,75,.6);
  outline-offset: 2px;
  border-radius: 6px;
}

/* --------- Formular-Stack ----------------------------------------- */
.form-stacked .field      { margin-bottom:1.2rem; }
.form-stacked label{
  display:block;
  font-size:.92rem;
  margin-bottom:.35rem;
  text-align:left;
  letter-spacing:.02em;
}
.form-stacked input,
.form-stacked select{
  width:100%;
  padding:.55rem .6rem;
  font-size:.95rem;
  border:1px solid #ccc;
  border-radius:4px;
  background:#fff;
}
.help { font-size:.85rem; color:#666; margin-top:.25rem }

/* --------- Gutschein/Voucher Ansicht (BEM-Basis) ------------------- */
.voucher{
  background:#fff;
  color:#000;
  border:2px solid #000;                 /* druck-sicher */
  border-radius:12px;
  padding:22px 18px;
  max-width:720px;                       /* etwas breiter für Bild */
  width:100%;
  margin:0 auto;
  position:relative;                     /* wichtig für Login-Pixel */
}
.voucher__head{
  display:flex; align-items:center; justify-content:space-between; gap:12px;
  margin-bottom:10px;
}
.voucher__title{ font-family:var(--ff-head); font-weight:700; font-size:1.6rem; letter-spacing:.03em }
.voucher__meta{ font-size:.9rem; color:#444 }
.voucher__qr{
  display:flex; align-items:center; justify-content:center;
  margin:16px 0;
}
.voucher__qr img{ width:180px; height:180px; object-fit:contain }
.voucher__amount{ font-size:2rem; font-weight:700; color:#000; margin:6px 0 2px }
.voucher__id{ font-family:ui-monospace, SFMono-Regular, Menlo, monospace; font-size:.92rem; color:#333 }
.voucher__legal{ font-size:.8rem; color:#555; margin-top:12px }

/* Floating Print-Button */
.print-btn{
  position:fixed; right:16px; bottom:16px; z-index:50;
  border-radius:999px;
  padding:.65rem 1rem;
  border:1px solid #d8dde6;
  background:#fff;
  font-weight:600;
  box-shadow:var(--shadow);
  cursor:pointer;
}
.print-btn:active{ transform: translateY(1px); }

/* --------- Kellner-Login-Pixel ------------------------------------ */
.login-pixel,
.login-px{
  position:absolute; top:6px; left:6px;
  width:28px; height:28px;               /* etwas größer, leichter zu treffen */
  opacity:0; cursor:pointer; z-index:99;
}
.login-pixel:hover,
.login-px:hover{ opacity:.4 }             /* zum Finden mit Maus */

/* --------- Tabellen (Admin-Listen o.ä.) --------------------------- */
.table-wrap{ overflow-x:auto }
.table{ width:100%; border-collapse:collapse; font-size:14px }
.table th,.table td{ border:1px solid #ddd; padding:8px; text-align:center }
.table th{ background:#fafafa }
.table tr:nth-child(even){ background:#fcfcfc }
.truncate{ max-width:220px; white-space:nowrap; overflow:hidden; text-overflow:ellipsis }
.zero{ color:#d0312d; font-weight:600 }

/* --------- Utilities ----------------------------------------------- */
.mt-s{ margin-top:.8rem } .mt-m{ margin-top:1.6rem } .mt-l{ margin-top:2.4rem }
.center{ text-align:center }
.hidden{ display:none !important }

/* --------- Spezifisch für gutschein.php (Adapter-Layer) ------------ */

/* Header-Foto */
.header-img{
  display:block;
  width:100%;
  height:auto;
  border-radius:10px;
  object-fit:cover;
  max-height:280px;
}
@media (max-width:480px){
  .header-img{ max-height:220px; }
}

/* Titelzeile mit Logos links/rechts */
.title{
  margin:16px 0 8px;
  text-align:center;
  font-family:var(--ff-head);
  font-weight:800;
  font-size: clamp(22px, 4.2vw, 32px);
  letter-spacing:.3px;
  display:flex;
  align-items:center;
  justify-content:center;
  gap:12px;
}
.title .logo{
  width: clamp(28px, 6vw, 40px);
  max-height: 40px;                       /* verhindert Abschneiden */
  height: auto;
  object-fit: contain;                     /* NICHT beschneiden */
  border-radius: 0;
  vertical-align: middle;
}

/* Meta-Zeilen */
.small{
  font-size: clamp(12px, 2.8vw, 14px);
  color:#4c5561;
  margin:2px 0;
  text-align:center;
  word-break:break-word;
}

/* Betrag / Status */
.amount{
  margin:14px 0;
  text-align:center;
  font-size: clamp(20px, 5vw, 28px);
  font-weight:700;
}

/* QR-Block (HTML-Variante) */
.qr{
  margin:18px auto 6px;
  display:grid;
  place-items:center;
}
.qr img{
  width: min(220px, 60vw);                 /* kleiner als vorher */
  height: auto;
}

/* --------- Print-Styles -------------------------------------------- */
@media print {
  @page{ size:auto; margin:8mm }
  html,body{ height:auto; padding:0; background:#fff }
  .print-btn, .btn, .no-print, .login-pixel, .login-px { display:none !important }
  .voucher{
    box-shadow:none; background:#fff; color:#000;
    border:2px solid #000;
    page-break-inside:avoid;
  }
  .qr img,
  .voucher__qr img{ width:190px; height:auto }  /* gut lesbar, nicht riesig */
}
/* === Print A4 Optimierung (Gutschein zentriert, QR kleiner) === */
@media print {
  @page { size: A4 portrait; margin: 12mm; }

  html, body { background:#fff; padding:0; height:auto; }
  body { display:block; }

  .voucher{
    /* füllt A4 „großteils“, bleibt aber sauber mit Rand */
    width: 170mm;
    max-width: 170mm;
    margin: 0 auto;           /* horizontal zentriert */
    padding: 8mm;             /* innenluft im Druck */
    border-radius: 6px;
    box-shadow: none;
    border: 2px solid #000;
    page-break-inside: avoid;
  }

  /* QR im Druck kleiner */
  .qr img,
  .voucher__qr img{
    width: 35mm;              /* ~3.5 cm */
    height: auto;
  }

  /* Bedienelemente ausblenden */
  .print-btn, .btn, .no-print, .login-pixel, .login-px { display:none !important; }
}