/* =====================================================================
   Modul: Gutscheine — Optik (MD3 / flach)
   Nunito · flach (keine Schatten) · 1px-Ränder + Flächentöne · Beige nur
   als CTA/Akzent, nie als Text. Alle Farben aus den Guide-Tokens.
   ===================================================================== */

/* ---------- Hero (hell, flach) ---------- */
/* Hintergrund/Untergrundfarbe kommt von .vw-section--surface. */
/* Standard-Rhythmus wie alle anderen Abschnitte (war 48 px unten) */
.gut-hero { padding-bottom: var(--vw-space-8); }
.gut-hero__title { margin: var(--vw-space-2) 0 var(--vw-space-4); }
.gut-hero__lead  { max-width: 60ch; color: var(--md-text-muted); }

/* ---------- Layout ---------- */
.gut-grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 380px;
  gap: 4rem;
  align-items: start;
  /* Auf breiten Bildschirmen nicht bis an die Ränder laufen (Layout-Audit 10/2026),
     sondern als Block mittig - vw-container bringt margin:auto mit. */
  max-width: 120rem;
}

.gut-block { margin-bottom: 4rem; }
.gut-block:last-child { margin-bottom: 0; }
.gut-block .vw-h2 { margin-top: .6rem; margin-bottom: 2rem; }

/* ---------- Beträge (flache Karten) ---------- */
.gut-amounts {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(min(180px, 100%), 1fr));
  gap: 1rem;
  align-items: stretch;
}
/* Nur den Auswahlknopf verstecken - nicht das Zahlenfeld bei "Frei waehlbar" */
/* Wie die Motivkarten: Schrift richtet sich nach der Kartenbreite (cqi). */
.gut-amount { min-width: 0; container-type: inline-size; }
.gut-amount input[type="radio"] { position: absolute; opacity: 0; pointer-events: none; }
.gut-amount__inner {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  height: 100%;
  min-height: 150px;
  border: 1px solid var(--md-outline);
  background: var(--md-surface);
  padding: 1.5rem;
  text-align: center;
  cursor: pointer;
  border-radius: var(--md-radius-card);
  transition: border-color var(--vw-transition), background var(--vw-transition);
}
.gut-amount__inner:hover { border-color: var(--md-text); }
.gut-amount__inner strong {
  font-family: var(--vw-font-display);
  font-weight: var(--vw-fw-black);
  display: block;
  font-size: min(3.6rem, 26cqi);
  color: var(--md-text);
  line-height: 1;
  margin: 0 0 .6rem;
}
.gut-amount__inner small {
  font-size: 1.3rem;
  color: var(--md-text-muted);
  line-height: 1.4;
}
.gut-amount input[type="radio"]:checked + .gut-amount__inner {
  border-color: var(--md-primary);
  background: var(--md-primary-light);
}

/* Frei-wählbar: gleiche optische Höhe wie die fixen Beträge */
.gut-amount--custom .gut-amount__inner strong {
  font-size: min(2.2rem, 12cqi);
  font-family: var(--vw-font-heading);
  font-weight: var(--vw-fw-text);
  letter-spacing: .04em;
  margin: 0 0 .8rem;
  color: var(--md-text);
}
.gut-amount--custom input[type="number"] {
  width: 100%;
  max-width: 140px;
  min-height: 44px;
  padding: .8rem 1.2rem;
  font-family: var(--vw-font-body);
  font-size: var(--vw-fs-md);   /* wie die anderen Felder der Seite */
  border: 1px solid var(--md-outline);
  background: var(--md-input-bg);
  color: var(--md-text);
  text-align: center;
  border-radius: var(--md-radius-input);
  margin: 0 0 .4rem;
}
.gut-amount--custom input[type="number"]:focus {
  outline: none;
  border-color: var(--md-text);
  box-shadow: 0 0 0 3px var(--md-primary-light);
}
.gut-amount--custom input[type="number"][aria-invalid="true"] {
  border-color: var(--md-error);
  box-shadow: 0 0 0 3px rgba(239, 68, 68, .15);
}
.gut-amount--custom input[type="number"]:disabled {
  background: var(--md-surface-muted);
  color: var(--md-text-muted);
}

/* ---------- Betrags-Fehlermeldung ---------- */
.gut-amount-error {
  margin-top: .8rem;
  padding: .8rem 1.2rem;
  background: var(--md-secondary-light);
  border: 1px solid var(--md-error);
  color: var(--md-text);
  font-size: 1.3rem;
  line-height: 1.5;
  border-radius: var(--md-radius-card);
}

/* ---------- PayPal-Gebühren-Aufschlüsselung (flach) ---------- */
.gut-paypal-breakdown {
  border: 1px solid var(--md-outline);
  background: var(--md-surface);
  margin-bottom: 1.6rem;
  border-radius: var(--md-radius-card);
  overflow: hidden;
}
.gut-paypal-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 1.1rem 1.6rem;
  font-size: 1.4rem;
  border-bottom: 1px solid var(--md-outline);
  color: var(--md-text);
}
.gut-paypal-row:last-child { border-bottom: none; }
.gut-paypal-row span:last-child {
  font-family: var(--vw-font-body);
  font-weight: var(--vw-fw-bold);
}
.gut-paypal-row--total {
  background: var(--md-primary-light);
}
.gut-paypal-row--total span:first-child {
  font-weight: var(--vw-fw-bold);
}
/* Gleiche Schrift wie „Gutscheinwert“ darüber (Inhaber 10/2026) - nur größer. */
.gut-paypal-row--total span:last-child {
  font-size: 1.8rem;
  color: var(--md-text);
}

/* ---------- Templates (flache Karten) ---------- */
.gut-templates {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(min(160px, 100%), 1fr));
  gap: 1rem;
  align-items: stretch;
}
/* Jede Karte ist ein Größen-Container: die Schrift darin richtet sich nach
   der Kartenbreite (cqi), nicht nur nach der Systemschrift. Ohne das lief
   „GESCHENKGUTSCHEIN“ auf Handys mit vergrößerter Schrift in die Nachbarkarte. */
.gut-tpl { cursor: pointer; display: flex; flex-direction: column; min-width: 0; container-type: inline-size; }
.gut-tpl input { position: absolute; opacity: 0; pointer-events: none; }
.gut-tpl__preview {
  position: relative;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  text-align: center;
  aspect-ratio: 3/2;
  min-height: 110px;
  padding: 1rem;
  border: 1px solid var(--md-outline);
  border-radius: var(--md-radius-card);
  background: var(--md-surface);
  color: var(--md-text);
  transition: border-color var(--vw-transition);
}
.gut-tpl__preview:hover { border-color: var(--md-text); }
/* Ausgewählter Anlass: Beige-Ring + Häkchen (flach) */
.gut-tpl input:checked ~ .gut-tpl__preview {
  border-color: var(--md-primary);
  box-shadow: 0 0 0 2px var(--md-primary);
}
.gut-tpl input:checked ~ .gut-tpl__preview::after {
  content: "check";
  font-family: 'Material Symbols Rounded';
  position: absolute;
  top: 6px; right: 6px;
  width: 22px; height: 22px;
  display: flex; align-items: center; justify-content: center;
  background: var(--md-primary);
  color: var(--md-on-primary);
  border-radius: 50%;
  font-size: 1.5rem; line-height: 1;
}
.gut-tpl__brand {
  font-family: var(--vw-font-display);
  font-weight: var(--vw-fw-black);
  font-size: min(2rem, 15cqi); line-height: 1.1;
  margin-bottom: .3rem;
  max-width: 100%;
}
.gut-tpl__sub {
  font-family: var(--vw-font-label);
  font-weight: var(--vw-fw-text);
  font-size: min(1.25rem, 8.5cqi); text-transform: uppercase; letter-spacing: .1em;
  max-width: 100%;
  color: var(--md-text);
}
.gut-tpl__label {
  display: block;
  text-align: center;
  margin-top: .6rem;
  font-family: var(--vw-font-label);
  font-weight: var(--vw-fw-text);
  font-size: min(1.4rem, 10cqi);
  text-transform: uppercase;
  letter-spacing: .1em;
  overflow-wrap: break-word;
  color: var(--md-text);        /* grau war in der feinen Schrift zu blass */
}
.gut-tpl input:checked ~ .gut-tpl__label { color: var(--md-text); }

/* Template-Stile — flach, aus Guide-Tönen (Akzent über Untergrundfarbe) */
.gut-tpl__preview--classic   { background: var(--md-secondary); }
.gut-tpl__preview--birthday  { background: var(--md-primary-light); }
.gut-tpl__preview--wedding   { background: var(--md-surface); }
.gut-tpl__preview--christmas { background: var(--md-secondary-light); }
.gut-tpl__preview--thanks    { background: var(--md-primary-light); }

/* ---------- Counter ---------- */
.gut-counter {
  float: right;
  font-size: 1.1rem;
  color: var(--md-text-muted);
  text-transform: none;
  letter-spacing: 0;
  font-weight: var(--vw-fw-text);
}

/* ---------- „optional"-Hinweis am Feld-Label ---------- */
.gut-optional {
  font-weight: var(--vw-fw-text);
  color: var(--md-text-muted);
  text-transform: none;
  letter-spacing: 0;
}

/* ---------- Validity-Note (flach) ---------- */
.gut-validity {
  max-width: none;   /* so breit wie die übrigen Formularblöcke, nicht 68ch */
  background: var(--md-surface);
  border: 1px solid var(--md-outline);
  padding: 1.2rem 1.5rem;
  font-size: 1.4rem; line-height: 1.6;
  margin: 1.5rem 0;
  border-radius: var(--md-radius-card);
  color: var(--md-text);
}
.gut-validity strong { color: var(--md-text); }
.gut-validity small { display: block; margin-top: .4rem; color: var(--md-text-muted); }

.res-check { display: flex; gap: .8rem; align-items: flex-start; font-size: 1.4rem; margin: 1.2rem 0; cursor: pointer; }
.res-check input { margin-top: 4px; accent-color: var(--md-primary); }
.res-check a { color: var(--md-text); }
.res-hint { font-size: 1.3rem; color: var(--md-text-muted); margin: .5rem 0 0; }

/* ---------- Bezahl-Button ---------- */
/* Nutzt .vw-btn .vw-btn--block aus dem Design-System; hier nur Feinschliff. */
.gut-paypal-btn { margin-top: .4rem; }
.gut-paypal-btn .msr { font-size: 2.2rem; }

/* ---------- Live-Preview (PDF-Look, flach) ---------- */
.gut-preview {
  /* unter der festen Kopfzeile mitlaufen */
  position: sticky; top: calc(var(--vw-header-h, 64px) + 1.6rem);
  display: flex; flex-direction: column; gap: 1.2rem;
}
/* Mobil-Umschalter (nur ≤1024px sichtbar) — Desktop: aus */
.gut-preview__toggle { display: none; }

/* Seite 1 / Seite 2 umschalten - beide Seiten im Hochformat untereinander
   waeren hoeher als der Bildschirm. Beim Tippen der Nachricht springt die
   Vorschau selbst auf Seite 2 (gutscheine.js). */
.gut-seiten { display: flex; gap: .6rem; }
.gut-seiten__knopf {
  flex: 1; min-height: 40px; padding: .6rem 1rem;
  font: inherit; font-size: 1.3rem; font-weight: var(--vw-fw-medium);
  border: 1px solid var(--md-outline); border-radius: 999px;
  background: var(--md-background); color: var(--md-text-muted); cursor: pointer;
}
.gut-seiten__knopf.is-aktiv { background: var(--md-text); border-color: var(--md-text); color: #fff; }

/* ---------- Vorschau = echtes PDF (server/pdf/voucher-pdf.js) ----------
   A4 hoch auf dem Firmen-Briefpapier. Alle Masse in pt wie im PDF und ueber
   die Containerbreite umgerechnet (--pt): die Vorschau skaliert mit, ohne
   dass sich etwas verschiebt. Schriften fest wie im PDF (Poiret One, Allura,
   Selawik) - das PDF folgt nicht den CMS-Schriften.
   Kopf und Fuss sind aus dem Briefpapier ausgeschnitten - ohne die Zeile mit
   Steuernummer und Bankverbindung, die gehoert nicht auf die Webseite. */
.gut-pdf {
  container-type: inline-size;
  background: #fff;
  border: 1px solid var(--md-outline);
  border-radius: 4px;
  box-shadow: 0 8px 28px rgba(0,0,0,.08);
  overflow: hidden;
  /* Die Vorschau klebt (sticky) - auf niedrigen Laptop-Bildschirmen darf das
     A4-Blatt nicht hoeher werden als das Fenster, sonst fehlt unten der Fuss.
     Breite aus der verfuegbaren Hoehe: Hoehe x 595/842. Platz ueber dem Blatt
     (Kopfzeile, Ueberschrift, Umschalter) und darunter ca. 20rem. */
  width: min(100%, calc((100vh - var(--vw-header-h, 64px) - 20rem) * 0.707));
  margin-inline: auto;
}
.gut-blatt {
  --pt: calc(100cqw / 595.28);
  position: relative;
  aspect-ratio: 595.28 / 841.89;
  background:
    /* Absenderzeile des Briefpapiers weiss abdecken - wie im PDF (Wunsch 10.10.) */
    linear-gradient(#fff, #fff) calc(50 * var(--pt)) calc(124 * var(--pt)) / calc(250 * var(--pt)) calc(22 * var(--pt)) no-repeat,
    url('../../images/gutschein-briefkopf.jpg') 0 0 / 100% auto no-repeat,
    url('../../images/gutschein-brieffuss.jpg') 0 calc(700 * var(--pt)) / 100% auto no-repeat,
    linear-gradient(#C6BEA7, #C6BEA7) 0 100% / 100% calc(46 * var(--pt)) no-repeat,
    #fff;
  color: #111;
  font-family: 'Selawik', 'Segoe UI', system-ui, sans-serif;
}
/* Eigenes Gutschein-Papier aus dem Admin (Bild fuer die ganze Seite) */
.gut-blatt--papier { background: #fff var(--papier) 0 0 / 100% 100% no-repeat; }
.gb {
  position: absolute; margin: 0;
  left: calc(70 * var(--pt)); right: calc(70 * var(--pt));
  text-align: center; line-height: 1.2;
}
.gb--eyebrow {
  top: calc(178 * var(--pt));
  font-size: calc(10 * var(--pt)); font-weight: 600;
  letter-spacing: calc(4 * var(--pt)); text-transform: uppercase;
  color: #4A0019;
}
.gb--titel  { top: calc(200 * var(--pt)); font-family: 'Poiret One', serif; font-size: calc(32 * var(--pt)); }
.gb--sub    { top: calc(242 * var(--pt)); font-size: calc(13 * var(--pt)); color: #6B6455; }
.gb--betrag { top: calc(280 * var(--pt)); font-family: 'Poiret One', serif; font-size: calc(66 * var(--pt)); white-space: nowrap; }
.gb--linie  {
  top: calc(372 * var(--pt)); left: calc(50% - 60 * var(--pt)); right: auto;
  width: calc(120 * var(--pt)); height: 1px; background: #C6BEA7;
}
.gb--qr {
  top: calc(392 * var(--pt)); left: calc(50% - 65 * var(--pt)); right: auto;
  width: calc(130 * var(--pt)); height: calc(130 * var(--pt));
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: calc(8 * var(--pt));
  border: 1px dashed #B9B2A0; border-radius: calc(6 * var(--pt));
  color: #8A8375; font-size: calc(10 * var(--pt)); line-height: 1.25;
}
.gb--qr svg { width: calc(46 * var(--pt)); height: calc(46 * var(--pt)); display: block; }
.gb--codelabel {
  top: calc(538 * var(--pt));
  font-size: calc(9 * var(--pt)); font-weight: 600; letter-spacing: calc(3 * var(--pt));
  text-transform: uppercase; color: #6B6455;
}
.gb--code {
  top: calc(552 * var(--pt));
  font-size: calc(22 * var(--pt)); font-weight: 700; letter-spacing: calc(2 * var(--pt));
}
.gb--gueltig { top: calc(612 * var(--pt)); font-size: calc(11 * var(--pt)); }
.gb--hinweis { top: calc(630 * var(--pt)); font-size: calc(9.5 * var(--pt)); color: #6B6455; }
.gb--fuer    { top: calc(210 * var(--pt)); font-family: 'Poiret One', serif; font-size: calc(28 * var(--pt)); }
.gb--nachricht {
  top: calc(290 * var(--pt)); left: calc(100 * var(--pt)); right: calc(100 * var(--pt));
  max-height: calc(400 * var(--pt)); overflow: hidden;
  font-size: calc(15 * var(--pt)); line-height: 1.5;
}
.gb--nachricht #pdfMsg { margin: 0; white-space: pre-wrap; overflow-wrap: anywhere; }
.gb--von {
  margin: calc(44 * var(--pt)) 0 0;
  font-family: 'Allura', cursive; font-size: calc(26 * var(--pt)); color: #4A0019;
}
/* Platzhalter, solange nichts eingetragen ist, blasser */
.gb .is-leer, .gb.is-leer { color: #A39E92; }

/* ---------- Admin Grid (vom Reservierungs-Modul wiederverwendbar) ---------- */
.res-admin-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(min(220px, 100%), 1fr));
  gap: 1.5rem;
  margin-top: 2rem;
}
.res-admin-grid .vw-card strong {
  display: block;
  font-family: var(--vw-font-label);
  font-weight: var(--vw-fw-text);
  text-transform: uppercase; letter-spacing: .08em;
  color: var(--md-text);
  font-size: 1.4rem;
  margin-bottom: .8rem;
}

/* ---------- Scanner-Promo ---------- */
.gut-scanner-promo { padding: 5rem 2rem; }

/* =====================================================================
   RESPONSIV
   ===================================================================== */

/* --- Tablet/Mobil: Grid einspaltig; Vorschau nach OBEN, kompakt --- */
@media (max-width: 1024px) {
  .gut-grid { grid-template-columns: minmax(0, 1fr); gap: 2.4rem; }

  /* Vorschau vor das Formular ziehen, damit der Gutschein beim Ausfüllen
     sichtbar entsteht. Sticky-Panel, nur Seite 1 + kompakte Höhe. */
  .gut-form    { order: 2; }
  .gut-preview {
    order: 1;
    position: static;
    gap: 1rem;
  }
  .gut-preview > .res-hint { display: none; }
  .gut-preview .vw-eyebrow { margin-bottom: 0; }
  .gut-preview .gut-pdf { width: 100%; max-width: 340px; margin: 0 auto; }
}

/* --- Ab 481px: Beträge 3 + 3 statt 4 + 2; Motive höchstens 3 pro Reihe
   und zentriert (5 -> 3 + 2 statt 4 + 1 mit einem einsamen "Danke"). --- */
@media (min-width: 481px) {
  .gut-grid .gut-amounts { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .gut-grid .gut-templates { display: flex; flex-wrap: wrap; justify-content: center; }
  .gut-grid .gut-templates .gut-tpl { flex: 0 1 calc((100% - 2rem) / 3); }
}

/* --- Kleine Phones: Beträge & Templates NICHT quetschen ---
   Überschreibt css/modules.css (dort ≤480px = 3 Spalten) mit höherer
   Spezifität (.gut-grid …), da modules.css nach gutscheine.css lädt. */
@media (max-width: 480px) {
  .gut-grid .gut-amounts,
  .gut-grid .gut-templates {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
  /* 5 Motive -> 2 + 2 + 1: das letzte mittig statt allein links */
  .gut-grid .gut-templates .gut-tpl:last-child:nth-child(odd) {
    grid-column: 1 / -1; justify-self: center; width: calc(50% - .5rem);
  }
  .gut-amount__inner { min-height: 120px; padding: 1.2rem; }
  .gut-amount__inner strong { font-size: min(3rem, 24cqi); }
}

.gut-rueckkehr { margin: 0 0 2rem; }