/* ARS KFZ-Gutschein – v2.0.3
 * Consolidated display rules. A6 landscape is the single coordinate/display basis.
 */
:root{--ars-bg:#111;--ars-panel:#171a1c;--ars-border:#555;--ars-accent:#b8d8cc;}
body.ars-public-voucher{background:var(--ars-bg);margin:0;padding:40px;font-family:Arial,sans-serif;}
.ars-gutschein-app{max-width:1100px;margin:0 auto;}
.ars-form-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:18px;}
.ars-form-grid .full{grid-column:1/-1;}
.ars-form-grid label,#ars-admin-test label{display:block;font-weight:600;}
.ars-form-grid input,.ars-form-grid textarea,#ars-admin-test input,#ars-admin-test textarea,#ars-admin-test select{width:100%;box-sizing:border-box;padding:10px;margin-top:6px;}
.ars-amount{display:flex;align-items:center;gap:6px;}
.ars-amount button{width:42px;height:42px;font-size:24px;}
.ars-amount input{width:100px;margin:0;}
.ars-quick{display:flex;flex-wrap:wrap;gap:6px;margin-top:8px;}
.ars-quick button{padding:6px 10px;}

/* Layout selector */
.ars-layouts{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px;}
.ars-layout{padding:0;text-align:left;background:#111;color:#fff;border:2px solid #555;border-radius:8px;cursor:pointer;overflow:hidden;position:relative;display:block;transition:border-color .2s,box-shadow .2s;}
.ars-layout.active{border-color:var(--ars-accent);box-shadow:0 0 0 2px #b8d8cc44;}
.ars-layout-preview{display:block;position:relative;height:145px;padding:18px;box-sizing:border-box;text-align:left;}
.ars-layout-info{display:block;padding:10px 12px;background:#0d0f10;text-align:left;color:#fff;}
.ars-layout-info strong{display:block;}
.ars-layout-info small{display:block;margin-top:3px;opacity:.65;}
.ars-mini-brand{font-size:10px;letter-spacing:1px;opacity:.8;}
.ars-mini-title{display:block;font-size:15px;font-weight:800;letter-spacing:1px;margin-top:18px;}
.ars-mini-price{position:absolute;right:18px;bottom:16px;font-size:25px;font-weight:800;}
.ars-premium.ars-layout-preview,.ars-thumb-premium{background:linear-gradient(135deg,#080909,#303438 55%,#0b0c0d);color:#fff;}
.ars-luxury.ars-layout-preview,.ars-thumb-luxury{background:linear-gradient(135deg,#07100d,#1b3930 55%,#080c0b);color:#d9fff0;}
.ars-automotive.ars-layout-preview,.ars-thumb-automotive{background:linear-gradient(120deg,#090b0c,#36464d 55%,#080909);color:#fff;}
.ars-classic.ars-layout-preview,.ars-thumb-classic{background:linear-gradient(135deg,#fff,#dfe5e1);color:#171b1a;border:1px solid #bbc3bf;}

/* A6 voucher – all output uses exactly 148 x 105 mm landscape */
.ars-voucher{position:relative;width:148mm;height:105mm;max-width:100%;margin:30px auto;overflow:hidden;box-sizing:border-box;background:#17191b;color:#fff;box-shadow:0 20px 60px #000;}
.ars-voucher-inner{position:relative;z-index:2;width:100%;height:100%;box-sizing:border-box;padding:48px;}
.ars-logo{max-width:220px;max-height:65px;width:auto;height:auto;object-fit:contain;}
.ars-brand{font-size:14px;letter-spacing:1px;margin:10px 0 30px;}
.ars-title{font-size:34px;font-weight:800;letter-spacing:3px;}
.ars-amount-big{font-size:70px;font-weight:800;margin:25px 0;}
.ars-meta{display:flex;gap:40px;border-top:1px solid #ffffff44;padding-top:16px;}
.ars-message{margin-top:25px;max-width:700px;overflow-wrap:anywhere;}
.ars-number{position:absolute;right:48px;bottom:30px;font-size:12px;letter-spacing:2px;opacity:.8;}
.ars-watermark{position:absolute;z-index:5;left:-10%;top:42%;width:120%;transform:rotate(-18deg);text-align:center;font-size:34px;font-weight:900;letter-spacing:3px;color:#fff;opacity:.22;border:4px solid #fff;padding:14px;box-sizing:border-box;pointer-events:none;}
.ars-invalid{position:absolute;z-index:6;right:20px;top:20px;padding:8px 12px;background:#000b;color:#fff;font-weight:700;font-size:12px;}

/* Custom artwork layouts */
.ars-voucher.ars-custom-layout{background-size:cover;background-position:center;background-repeat:no-repeat;}
.ars-custom-layout .ars-voucher-inner{position:relative;width:100%;height:100%;padding:0;background:transparent;}
.ars-custom-layout .ars-field{position:absolute;box-sizing:border-box;line-height:1.2;z-index:3;overflow-wrap:anywhere;}
.ars-custom-layout .ars-field-logo .ars-logo{max-width:100%;max-height:100%;height:auto;display:block;}
.ars-custom-layout .ars-watermark,.ars-custom-layout .ars-invalid{z-index:10;}
.ars-custom-layout .ars-field-title{font-weight:700;}
.ars-custom-layout .ars-field-amount{font-weight:800;}
.ars-custom-layout .ars-field-message{white-space:normal;}
.ars-layout-thumb{display:block;position:relative;width:100%;aspect-ratio:148/105;height:auto;min-height:78px;border-radius:8px;overflow:hidden;background-size:cover!important;background-position:center!important;background-repeat:no-repeat!important;box-shadow:inset 0 0 0 1px #ffffff33;}
.ars-layout-thumb i{position:absolute;left:10px;top:8px;font-size:10px;font-style:normal;letter-spacing:2px;}
.ars-layout-thumb b{position:absolute;left:10px;top:30px;font-size:10px;letter-spacing:1px;}
.ars-layout-thumb em{position:absolute;right:10px;bottom:8px;font-size:18px;font-style:normal;font-weight:800;}
.ars-layout-copy{display:block;text-align:left;}
.ars-layout-copy strong{display:block;}
.ars-layout-copy small{display:block;margin-top:5px;opacity:.7;}

/* Admin test previews */
.ars-admin-wrap{max-width:1500px;}
.ars-test-controls{background:#fff;border:1px solid #ccd0d4;border-radius:10px;padding:18px;display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:14px;margin:20px 0;box-sizing:border-box;}
.ars-test-controls .full{grid-column:1/-1;}
.ars-test-controls label{display:block;font-weight:600;margin-bottom:5px;}
.ars-test-controls input,.ars-test-controls textarea{width:100%;box-sizing:border-box;padding:8px;}
.ars-test-controls textarea{min-height:70px;resize:vertical;}
.ars-test-layouts{display:grid;grid-template-columns:1fr;gap:16px;}
.ars-standard-test-layouts{grid-template-columns:1fr;}
.ars-test-layout-card{background:#fff;border:1px solid #dcdcde;border-radius:10px;padding:14px;box-sizing:border-box;display:flex;align-items:center;gap:18px;transition:border-color .2s,box-shadow .2s;}
.ars-test-layout-card.selected{border-color:#2271b1;box-shadow:0 0 0 2px #2271b122;}
.ars-test-card-title{flex:1 1 auto;min-width:180px;margin:0;}
.ars-test-card-title strong{font-size:15px;}
.ars-test-card-title span{display:block;margin-top:4px;font-size:12px;color:#646970;}
.ars-test-preview{flex:0 0 250px;width:250px;max-width:250px;margin:0;overflow:hidden;}
.ars-test-preview .ars-voucher,.ars-test-preview .ars-custom-layout{width:250px;height:auto;max-width:none;min-width:0;min-height:0;aspect-ratio:148/105;margin:0;box-shadow:none;}
.ars-test-preview .ars-voucher-inner{padding:14px;}
.ars-test-preview .ars-title{font-size:16px;}
.ars-test-preview .ars-amount-big{font-size:30px;margin:9px 0;}
.ars-test-preview .ars-number{right:12px;bottom:8px;}
.ars-test-preview .ars-watermark{font-size:13px;border-width:2px;padding:6px;}
.ars-test-layout-card .ars-use-layout{flex:0 0 auto;margin:0;white-space:nowrap;}
.ars-test-custom-image{width:250px;height:auto;aspect-ratio:148/105;background:#f0f0f1;border:1px solid #dcdcde;overflow:hidden;margin:0;box-sizing:border-box;flex:0 0 250px;}
.ars-test-custom-image img{display:block;width:100%;height:100%;object-fit:contain;}
.ars-custom-test-card{display:flex;align-items:center;gap:18px;}
.ars-custom-test-card .ars-test-card-title{flex:1 1 auto;}
.ars-custom-test-card .ars-test-preview{flex:0 0 250px;}
.ars-test-actions{background:#fff;border:1px solid #dcdcde;border-radius:10px;padding:16px 18px;display:flex;align-items:center;justify-content:space-between;gap:18px;margin-top:20px;box-sizing:border-box;}
.ars-test-actions h2{margin:0 0 4px;font-size:17px;}
.ars-test-action-buttons{display:flex;gap:8px;flex-wrap:wrap;}
#t-result{margin-top:14px;}
/* Result preview keeps A6 landscape ratio; no artificial portrait frame. */
#t-result .ars-result-preview-frame{width:min(100%,560px);aspect-ratio:148/105;height:auto;margin:20px auto;display:flex;align-items:center;justify-content:center;overflow:hidden;box-sizing:border-box;background:#f0f0f1;border:1px solid #dcdcde;border-radius:8px;padding:10px;}
#t-result .ars-result-preview-frame .ars-voucher,#t-result .ars-result-preview-frame .ars-custom-layout{width:100%;height:auto;max-width:none;max-height:none;aspect-ratio:148/105;margin:0;box-shadow:none;}
#t-result .ars-result-preview-frame .ars-voucher-inner{box-sizing:border-box;}


/* v2.1.1: The small live cover preview must use the same A6 geometry and
 * the same non-cropping background treatment as the editor. */
#ars-cover-preview{width:100%;min-width:0;overflow:hidden;box-sizing:border-box;}
#ars-cover-preview .ars-cover-live-voucher{display:block;position:relative;width:100%!important;height:auto!important;max-width:none!important;min-width:0!important;min-height:0!important;aspect-ratio:148/105!important;margin:0!important;padding:0!important;box-sizing:border-box;overflow:hidden;background-size:contain!important;background-position:center!important;background-repeat:no-repeat!important;box-shadow:none;}
#ars-cover-preview .ars-cover-live-voucher .ars-voucher-inner{position:absolute;inset:0;width:100%;height:100%;margin:0;padding:0;box-sizing:border-box;overflow:hidden;}
#ars-cover-preview .ars-cover-live-field{position:absolute;box-sizing:border-box;margin:0;padding:0;}

/* Uploaded layout form/editor */
.ars-custom-layout-form{max-width:1200px;}
.ars-custom-layout-form #ars-layout-image-preview{width:148mm;max-width:100%;height:105mm;max-height:70vh;display:flex;align-items:center;justify-content:center;background:#eef0f1;border:1px solid #c3c4c7;border-radius:8px;overflow:hidden;margin-top:10px;box-sizing:border-box;}
.ars-custom-layout-form #ars-layout-image-preview img{width:100%;height:100%;max-width:none;max-height:none;object-fit:contain;margin:0;border-radius:0;}
.ars-layout-editor{display:grid;grid-template-columns:minmax(0,1fr) 270px;gap:20px;align-items:start;margin:18px 0 24px;}
.ars-editor-stage-wrap{display:flex;justify-content:center;align-items:flex-start;min-width:0;background:#e9eaec;border:1px solid #c3c4c7;border-radius:10px;padding:18px;overflow:auto;box-sizing:border-box;}
.ars-editor-stage.ars-voucher{position:relative;flex:0 1 auto;width:min(900px,100%) !important;max-width:900px !important;min-width:0 !important;height:auto;aspect-ratio:148/105;margin:0 auto;padding:0;border:0;border-radius:0;box-sizing:border-box;overflow:hidden;box-shadow:none;background-size:contain !important;background-position:center;background-repeat:no-repeat;transform:none!important;}
.ars-editor-stage.ars-custom-layout .ars-voucher-inner{position:absolute;inset:0;width:100%;height:100%;margin:0;padding:0;box-sizing:border-box;overflow:hidden;background:transparent;}
.ars-editor-stage .ars-editor-field{position:absolute;margin:0;padding:0;min-height:0;box-sizing:border-box;overflow:visible;background:transparent;border:1px dashed rgba(19,94,150,.65);line-height:1.2;z-index:10;overflow-wrap:anywhere;}
.ars-editor-stage .ars-editor-field:hover,.ars-editor-stage .ars-editor-field:focus{border:2px solid #135e96;background:transparent;outline:none;}
.ars-editor-stage .ars-editor-field .ars-editor-resize{position:absolute;right:-1px;bottom:-1px;width:10px;height:10px;border-right:3px solid #135e96;border-bottom:3px solid #135e96;cursor:nwse-resize;background:rgba(255,255,255,.85);}
.ars-editor-stage .ars-editor-field .ars-logo{display:block;max-width:100%;max-height:100%;width:auto;height:auto;object-fit:contain;}
.ars-editor-stage .ars-editor-overlay{position:absolute;inset:0;pointer-events:none;z-index:2;}
.ars-editor-field.ars-editor-custom{border-style:dashed;}
.ars-editor-field img{display:block;width:100%;height:100%;object-fit:contain;pointer-events:none;}
.ars-editor-empty{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;color:#646970;background:#f6f7f7;font-size:15px;}
.ars-editor-sidebar{background:#fff;border:1px solid #dcdcde;border-radius:10px;padding:16px;box-shadow:0 2px 8px rgba(0,0,0,.05);}
.ars-editor-sidebar h4{margin-top:0;}
.ars-editor-sidebar select,.ars-editor-sidebar input{display:block;width:100%;margin-top:5px;box-sizing:border-box;}
.ars-editor-sidebar label{display:block;font-weight:600;margin:10px 0;}
.ars-editor-sidebar .description{font-size:12px;}
.ars-editor-sidebar input[type=range]{padding:0;}
.ars-editor-sidebar .ars-check{display:flex;align-items:center;gap:6px;}
.ars-editor-sidebar .ars-check input{width:auto;margin:0;}
.ars-editor-sidebar .ars-control-grid{display:grid;grid-template-columns:1fr 1fr;gap:8px;}
.ars-editor-sidebar .ars-control-grid label{font-size:12px;}
.ars-editor-sidebar .ars-control-grid input{min-width:0;}
.ars-editor-settings{display:grid;grid-template-columns:repeat(5,minmax(120px,1fr));gap:10px;margin:12px 0;padding:12px;background:#f6f7f7;border:1px solid #dcdcde;border-radius:8px;box-sizing:border-box;}
.ars-editor-settings label{font-size:12px;font-weight:600;}
.ars-editor-settings select,.ars-editor-settings input{display:block;width:100%;margin-top:5px;box-sizing:border-box;}
.ars-editor-toolbar{display:flex;gap:8px;flex-wrap:wrap;margin:12px 0;}
.ars-editor-toolbar .button{margin:0;}
.ars-pick-custom-image{margin:0 0 8px;}
.ars-editor-delete{display:block;margin-top:14px;color:#b32d2e;border-color:#b32d2e;}
.ars-visibility{padding:9px 10px;background:#f0f6fc;border:1px solid #c3d8ee;border-radius:6px;}
.ars-visibility input{display:inline-block;width:auto;margin:0 6px 0 0;}
.ars-position-hidden{display:none;}
.ars-custom-layout-list{display:grid;grid-template-columns:repeat(auto-fill,minmax(280px,1fr));gap:16px;margin:15px 0 30px;}
.ars-custom-layout-item{display:flex;gap:12px;align-items:flex-start;padding:12px;background:#fff;border:1px solid #dcdcde;border-radius:8px;box-sizing:border-box;}
.ars-custom-layout-item img{width:148px;height:105px;object-fit:contain;border-radius:5px;background:#eef0f1;flex:0 0 auto;}
.ars-custom-layout-item strong{font-size:14px;}
.ars-custom-layout-item span{color:#646970;}
.ars-custom-layout-item .button{margin-top:10px;}
.ars-position-table input{width:90px;}

.ars-print{display:block;margin:20px auto;padding:12px 20px;}

@media(max-width:1000px){
  .ars-editor-settings{grid-template-columns:repeat(2,minmax(120px,1fr));}
}
@media(max-width:900px){
  .ars-layout-editor{grid-template-columns:1fr;}
  .ars-test-layout-card,.ars-custom-test-card{display:grid;grid-template-columns:1fr;gap:12px;}
  .ars-test-preview,.ars-custom-test-card .ars-test-custom-image{justify-self:start;}
  .ars-editor-stage-wrap{justify-content:flex-start;}
  .ars-custom-layout-list{grid-template-columns:1fr 1fr;}
}
@media(max-width:700px){
  body.ars-public-voucher{padding:20px;}
  .ars-form-grid{grid-template-columns:1fr;}
  .ars-form-grid .full{grid-column:auto;}
  .ars-voucher{width:100%;height:auto;aspect-ratio:148/105;}
  .ars-voucher-inner{padding:28px;}
  .ars-title{font-size:24px;}
  .ars-amount-big{font-size:50px;}
  .ars-meta{display:block;}
  .ars-meta span{display:block;margin:5px 0;}
  .ars-layouts{grid-template-columns:1fr;}
  .ars-test-controls{grid-template-columns:1fr;}
  .ars-test-controls .full{grid-column:auto;}
  .ars-custom-layout-list{grid-template-columns:1fr;}
}
@media(max-width:600px){
  .ars-editor-settings{grid-template-columns:1fr;}
  .ars-test-actions{align-items:flex-start;flex-direction:column;}
}

@media print{
  @page{size:A6 landscape;margin:0;}
  html,body{width:148mm;height:105mm;}
  body.ars-public-voucher{background:#fff;padding:0;margin:0;}
  .ars-voucher{width:148mm!important;height:105mm!important;max-width:148mm!important;min-width:148mm!important;aspect-ratio:auto!important;margin:0!important;box-shadow:none!important;}
  .ars-voucher-inner{width:100%;height:100%;box-sizing:border-box;}
  .ars-print{display:none!important;}
}


/* v2.2.12 – Druck/PDF: Das Layoutbild wird beim Drucken als echtes Bild
 * ausgegeben. Dadurch ist der Gutschein-Hintergrund nicht von der Browser-
 * Einstellung „Hintergrundgrafiken“ abhängig. Auf dem Bildschirm bleibt
 * die bisherige Hintergrunddarstellung unverändert. */
.ars-print-background{
  display:block!important;
  position:absolute!important;
  left:0!important;
  top:0!important;
  width:100%!important;
  height:100%!important;
  max-width:none!important;
  max-height:none!important;
  margin:0!important;
  padding:0!important;
  border:0!important;
  z-index:0!important;
  object-position:center;
}

@media print{
  html,body{
    width:148mm!important;
    height:105mm!important;
    margin:0!important;
    padding:0!important;
    background:#fff!important;
    -webkit-print-color-adjust:exact!important;
    print-color-adjust:exact!important;
  }
  body.ars-public-voucher{
    width:148mm!important;
    min-width:148mm!important;
    max-width:148mm!important;
    height:105mm!important;
    overflow:hidden!important;
  }
  body.ars-public-voucher .ars-voucher{
    position:relative!important;
    width:148mm!important;
    height:105mm!important;
    min-width:148mm!important;
    max-width:148mm!important;
    min-height:105mm!important;
    max-height:105mm!important;
    margin:0!important;
    padding:0!important;
    border:0!important;
    box-shadow:none!important;
    overflow:hidden!important;
    break-inside:avoid!important;
    page-break-inside:avoid!important;
    -webkit-print-color-adjust:exact!important;
    print-color-adjust:exact!important;
  }
  body.ars-public-voucher .ars-voucher > .ars-print-background{
    display:block!important;
    position:absolute!important;
    left:0!important;
    top:0!important;
    width:100%!important;
    height:100%!important;
    max-width:none!important;
    max-height:none!important;
    margin:0!important;
    padding:0!important;
    border:0!important;
    z-index:0!important;
    object-fit:cover!important;
    object-position:center!important;
    -webkit-print-color-adjust:exact!important;
    print-color-adjust:exact!important;
  }
  body.ars-public-voucher .ars-voucher > .ars-voucher-inner{
    position:relative!important;
    z-index:2!important;
    width:100%!important;
    height:100%!important;
    margin:0!important;
    padding:0!important;
    box-sizing:border-box!important;
  }
  body.ars-public-voucher .ars-voucher.ars-custom-layout > .ars-voucher-inner{
    position:relative!important;
    width:100%!important;
    height:100%!important;
    padding:0!important;
  }
  body.ars-public-voucher .ars-print{display:none!important;}
  body.ars-public-voucher .ars-voucher.ars-custom-layout > .ars-voucher-inner > .ars-field{
    position:absolute!important;
    margin:0!important;
    padding:0!important;
    box-sizing:border-box!important;
  }
  body.ars-public-voucher .ars-voucher.ars-custom-layout .ars-layout-overlay{
    position:absolute!important;
    inset:0!important;
    z-index:1!important;
    pointer-events:none!important;
  }
}

/* v1.10.5 – ONE A6 CANVAS FOR EDITOR, ADMIN PREVIEW, CUSTOMER PREVIEW AND PRINT
 * The voucher itself is ALWAYS 148 x 105 mm. Backend previews only scale that
 * exact canvas as a whole; they never change its internal typography, padding or
 * spacing. This keeps screen and print output visually identical.
 */
.ars-a6-preview-frame{
  position:relative;
  overflow:hidden;
  box-sizing:border-box;
  margin:20px auto;
  background:#f0f0f1;
  border:1px solid #dcdcde;
  border-radius:8px;
  padding:0;
}
.ars-a6-preview-frame--small{
  --ars-a6-preview-width:250px;
  width:250px;
  height:177.3649px;
}
.ars-a6-preview-frame--large{
  --ars-a6-preview-width:min(100%,560px);
  width:min(100%,560px);
  height:calc(min(100vw, 560px) * 105 / 148);
  max-height:397.2973px;
}
.ars-a6-preview-frame > .ars-voucher{
  position:absolute;
  left:0;
  top:0;
  width:148mm!important;
  height:105mm!important;
  min-width:148mm!important;
  min-height:105mm!important;
  max-width:none!important;
  max-height:none!important;
  margin:0!important;
  aspect-ratio:auto!important;
  transform-origin:top left;
  box-shadow:none!important;
}
.ars-a6-preview-frame--small > .ars-voucher{
  transform:scale(.446899);
}
.ars-a6-preview-frame--large > .ars-voucher{
  transform:scale(1.001128);
}
/* Remove the old preview rules' typography/padding alterations. */
.ars-test-preview{flex:0 0 250px;width:250px;max-width:250px;margin:0;overflow:hidden;}
.ars-test-preview .ars-a6-preview-frame{margin:0;}
.ars-test-preview .ars-voucher-inner{padding:48px;}
#t-result .ars-a6-preview-frame{margin:20px auto;}
#t-result .ars-a6-preview-frame .ars-voucher-inner{box-sizing:border-box;}

@media(max-width:600px){
  .ars-a6-preview-frame--large{width:100%;height:auto;aspect-ratio:148/105;}
  .ars-a6-preview-frame--large > .ars-voucher{transform:scale(calc(100vw / 559.3700787));}
}

/* v1.10.8 – Live Cover preview: exactly the same A6 canvas size as the layout image. */
.ars-cover-preview-row{
  display:grid;
  grid-template-columns:minmax(0,1fr) minmax(0,1fr);
  gap:20px;
  align-items:start;
  max-width:1160px;
  margin-top:14px;
}
.ars-cover-preview-col>strong{display:block;margin:0 0 7px;font-size:13px;}
.ars-custom-layout-form #ars-layout-image-preview,
.ars-custom-layout-form #ars-cover-preview{
  width:min(100%,560px);
  aspect-ratio:148/105;
  height:auto;
  max-height:none;
  display:block;
  position:relative;
  background:#eef0f1;
  border:1px solid #c3c4c7;
  border-radius:8px;
  overflow:hidden;
  margin-top:0;
  box-sizing:border-box;
}
.ars-custom-layout-form #ars-layout-image-preview img{
  display:block;
  width:100%;
  height:100%;
  max-width:none;
  max-height:none;
  object-fit:contain;
  margin:0;
  border-radius:0;
}
.ars-custom-layout-form #ars-cover-preview .ars-cover-live-voucher{
  position:absolute!important;
  left:0!important;
  top:0!important;
  width:100%!important;
  height:auto!important;
  min-width:0!important;
  min-height:0!important;
  max-width:none!important;
  max-height:none!important;
  margin:0!important;
  padding:0!important;
  aspect-ratio:148/105!important;
  box-shadow:none!important;
  border:0!important;
  border-radius:0!important;
  overflow:hidden!important;
}
.ars-custom-layout-form #ars-cover-preview .ars-voucher-inner{
  width:100%!important;
  height:100%!important;
  padding:0!important;
  margin:0!important;
  box-sizing:border-box!important;
}
.ars-custom-layout-form #ars-cover-preview .ars-editor-field{
  border:0!important;
  background:transparent!important;
  outline:0!important;
}
.ars-custom-layout-form #ars-cover-preview .ars-editor-overlay{pointer-events:none;}
.ars-cover-empty{
  width:100%;height:100%;display:flex;align-items:center;justify-content:center;
  color:#646970;background:#f6f7f7;font-size:14px;box-sizing:border-box;
}
@media(max-width:900px){
  .ars-cover-preview-row{grid-template-columns:1fr;}
}
@media(max-width:900px){.ars-layout-editor{grid-template-columns:1fr}.ars-editor-stage-wrap{justify-content:center}.ars-editor-sidebar{width:100%;box-sizing:border-box}}

/* Live cover overlay keeps the same absolute A6 coordinate system as the editor. */
.ars-custom-layout-form #ars-cover-preview .ars-cover-live-overlay{
  position:absolute!important;
  inset:0!important;
  z-index:2!important;
  pointer-events:none!important;
}

/* v1.10.14: live preview fields use the same percentage A6 coordinate system as the editor and final voucher. */
.ars-custom-layout-form #ars-cover-preview .ars-cover-live-field{position:absolute!important;box-sizing:border-box!important;margin:0!important;padding:0!important;border:0!important;background:transparent!important;outline:0!important;overflow:visible!important;line-height:1.2;}

/* v2.0.1 – isolated A6 editor canvas */
#ars-editor-stage{position:relative!important;display:block!important;width:min(900px,100%)!important;height:auto!important;aspect-ratio:148/105!important;margin:0 auto!important;padding:0!important;border:0!important;box-sizing:border-box!important;overflow:hidden!important;background:transparent!important;isolation:isolate!important;contain:layout paint style;}
#ars-editor-stage .ars-editor-canvas{position:absolute!important;inset:0!important;display:block!important;width:100%!important;height:100%!important;margin:0!important;padding:0!important;box-sizing:border-box!important;overflow:hidden!important;background-repeat:no-repeat!important;isolation:isolate!important;}
#ars-editor-stage .ars-editor-canvas>.ars-voucher-inner{position:absolute!important;inset:0!important;width:100%!important;height:100%!important;margin:0!important;padding:0!important;box-sizing:border-box!important;overflow:hidden!important;}
#ars-editor-stage .ars-editor-field{position:absolute!important;margin:0!important;padding:0!important;box-sizing:border-box!important;}
#ars-editor-stage .ars-editor-overlay{position:absolute!important;inset:0!important;margin:0!important;padding:0!important;}

/* v2.0.3 – editor and live cover use the same explicit A6 canvas. */
#ars-editor-stage.ars-editor-stage.ars-voucher.ars-custom-layout{
  position:relative!important;
  display:block!important;
  width:min(900px,100%)!important;
  height:auto!important;
  aspect-ratio:148/105!important;
  max-width:900px!important;
  min-width:0!important;
  min-height:0!important;
  margin:0 auto!important;
  padding:0!important;
  overflow:hidden!important;
  box-sizing:border-box!important;
  background-repeat:no-repeat!important;
  background-position:center!important;
}
#ars-editor-stage.ars-editor-stage.ars-voucher.ars-custom-layout > .ars-voucher-inner{
  position:absolute!important;
  inset:0!important;
  width:100%!important;
  height:100%!important;
  margin:0!important;
  padding:0!important;
  overflow:hidden!important;
  box-sizing:border-box!important;
}
#ars-editor-stage .ars-editor-field{
  position:absolute!important;
  margin:0!important;
  box-sizing:border-box!important;
}
#ars-cover-preview{
  position:relative;
  width:100%;
  aspect-ratio:148/105;
  overflow:hidden;
  box-sizing:border-box;
}
#ars-cover-preview .ars-cover-live-voucher{
  position:relative!important;
  display:block!important;
  width:100%!important;
  height:auto!important;
  min-width:0!important;
  min-height:0!important;
  max-width:none!important;
  max-height:none!important;
  margin:0!important;
  padding:0!important;
  aspect-ratio:148/105!important;
  overflow:hidden!important;
  box-sizing:border-box!important;
}
#ars-cover-preview .ars-cover-live-voucher > .ars-voucher-inner{
  position:absolute!important;
  inset:0!important;
  width:100%!important;
  height:100%!important;
  padding:0!important;
  margin:0!important;
  box-sizing:border-box!important;
}
#ars-cover-preview .ars-cover-live-field{position:absolute!important;box-sizing:border-box!important;margin:0!important;padding:0!important;}

/* v2.1 – deterministic internal A6 editor coordinate system */
#ars-editor-stage .ars-editor-canvas{width:1480px!important;height:1050px!important;transform-origin:top left!important;position:absolute!important;left:0!important;top:0!important;}
#ars-editor-stage .ars-editor-canvas>.ars-voucher-inner{width:1480px!important;height:1050px!important;position:absolute!important;left:0!important;top:0!important;}
#ars-cover-preview .ars-cover-live-voucher .ars-editor-canvas{width:100%!important;height:100%!important;transform:none!important;transform-origin:top left!important;left:0!important;top:0!important;}
#ars-cover-preview .ars-cover-live-voucher .ars-voucher-inner{width:100%!important;height:100%!important;left:0!important;top:0!important;}

/* v2.1.2 – the editor mini live preview owns its background image explicitly.
 * This prevents the background from disappearing when the editor canvas is cloned. */
.ars-custom-layout-form #ars-cover-preview .ars-cover-live-voucher{
  background-repeat:no-repeat!important;
  background-position:center!important;
  overflow:hidden!important;
}
.ars-custom-layout-form #ars-cover-preview .ars-cover-live-voucher .ars-editor-canvas{
  background-image:none!important;
  background-color:transparent!important;
}

/* v2.1.5 – prevent percentage-height collapse in the admin live preview */
.ars-custom-layout-form #ars-cover-preview{position:relative!important;width:100%!important;aspect-ratio:148/105!important;height:auto!important;overflow:hidden!important;}
.ars-custom-layout-form #ars-cover-preview .ars-cover-live-voucher{width:100%!important;height:auto!important;aspect-ratio:148/105!important;min-height:0!important;}
/* v2.1.5 – robust live preview base image: the image is a real element in the preview container. */
.ars-custom-layout-form #ars-cover-preview{position:relative!important;width:100%!important;aspect-ratio:148/105!important;height:auto!important;min-height:0!important;overflow:hidden!important;box-sizing:border-box!important;}
.ars-custom-layout-form #ars-cover-preview .ars-cover-base-image{position:absolute!important;inset:0!important;width:100%!important;height:100%!important;display:block!important;margin:0!important;padding:0!important;border:0!important;max-width:none!important;max-height:none!important;object-fit:contain!important;z-index:0!important;}
.ars-custom-layout-form #ars-cover-preview .ars-cover-live-layer{position:absolute!important;inset:0!important;width:100%!important;height:100%!important;overflow:hidden!important;z-index:1!important;}

/* v2.1.6 – explicit preview height; the preview layer is absolutely positioned. */
.ars-custom-layout-form #ars-cover-preview{height:auto!important;min-height:0!important;position:relative!important;width:min(100%,560px)!important;aspect-ratio:148/105!important;overflow:hidden!important;box-sizing:border-box!important;}
.ars-custom-layout-form #ars-cover-preview .ars-cover-base-image{position:absolute!important;left:0!important;top:0!important;right:auto!important;bottom:auto!important;width:100%!important;height:100%!important;display:block!important;visibility:visible!important;opacity:1!important;max-width:none!important;max-height:none!important;margin:0!important;padding:0!important;border:0!important;object-fit:contain!important;object-position:center!important;z-index:0!important;}
.ars-custom-layout-form #ars-cover-preview .ars-cover-live-layer{position:absolute!important;left:0!important;top:0!important;right:0!important;bottom:0!important;width:100%!important;height:100%!important;z-index:1!important;overflow:hidden!important;}

/* v2.1.7 – live preview uses the same normal-flow image behavior as the working source image preview. */
.ars-custom-layout-form #ars-cover-preview{position:relative!important;width:min(100%,560px)!important;height:auto!important;min-height:1px!important;aspect-ratio:auto!important;overflow:hidden!important;box-sizing:border-box!important;display:block!important;}
.ars-custom-layout-form #ars-cover-preview .ars-cover-base-image{position:relative!important;left:auto!important;top:auto!important;right:auto!important;bottom:auto!important;display:block!important;visibility:visible!important;opacity:1!important;width:100%!important;height:auto!important;max-width:none!important;max-height:none!important;margin:0!important;padding:0!important;border:0!important;object-fit:initial!important;object-position:initial!important;z-index:0!important;}
.ars-custom-layout-form #ars-cover-preview .ars-cover-live-layer{position:absolute!important;left:0!important;top:0!important;right:0!important;bottom:0!important;width:100%!important;height:100%!important;z-index:1!important;overflow:hidden!important;pointer-events:none!important;}

/* v2.1.8 – deterministic live preview: background image is painted directly on the preview box. */
.ars-custom-layout-form #ars-cover-preview{
  position:relative!important; display:block!important; width:min(100%,560px)!important; height:auto!important; min-height:120px!important; aspect-ratio:148/105!important;
  overflow:hidden!important; box-sizing:border-box!important; background-color:#eef0f1!important; background-repeat:no-repeat!important; background-position:center!important; background-size:100% 100%!important;
}
.ars-custom-layout-form #ars-cover-preview .ars-cover-live-layer{position:absolute!important;left:0!important;top:0!important;right:0!important;bottom:0!important;width:100%!important;height:100%!important;z-index:5!important;overflow:hidden!important;pointer-events:none!important;}

/* v2.1.9 – deterministic live preview: real image element, fixed A6 preview box. */
.ars-custom-layout-form #ars-cover-preview{position:relative!important;display:block!important;width:min(560px,100%)!important;height:397px!important;max-height:none!important;min-height:397px!important;aspect-ratio:auto!important;overflow:hidden!important;box-sizing:border-box!important;background:#111!important;}
.ars-custom-layout-form #ars-cover-preview .ars-live-bg{display:block!important;visibility:visible!important;opacity:1!important;position:absolute!important;left:0!important;top:0!important;width:100%!important;height:100%!important;max-width:none!important;max-height:none!important;object-fit:fill!important;object-position:top left!important;margin:0!important;padding:0!important;border:0!important;z-index:0!important;}
.ars-custom-layout-form #ars-cover-preview .ars-cover-live-layer{position:absolute!important;left:0!important;top:0!important;right:0!important;bottom:0!important;width:100%!important;height:100%!important;z-index:5!important;overflow:hidden!important;pointer-events:none!important;}

/* v2.2.2 – larger editor viewing area. The canvas keeps the exact A6 ratio;
 * the wrapper may scroll instead of clipping the artwork. */
.ars-editor-stage-wrap{
  overflow:auto!important;
  align-items:flex-start!important;
  justify-content:center!important;
  max-height:calc(100vh - 180px);
}
#ars-editor-stage.ars-editor-stage.ars-voucher.ars-custom-layout{
  width:min(1100px,100%)!important;
  max-width:1100px!important;
  flex:0 0 auto!important;
}
.ars-editor-stage-wrap.ars-editor-view-large{
  position:relative!important;
  max-height:none!important;
  min-height:calc(100vh - 220px)!important;
  justify-content:flex-start!important;
}
.ars-editor-stage-wrap.ars-editor-view-large #ars-editor-stage.ars-editor-stage.ars-voucher.ars-custom-layout{
  width:1100px!important;
  max-width:none!important;
}
@media(max-width:900px){
  #ars-editor-stage.ars-editor-stage.ars-voucher.ars-custom-layout{width:min(100%,900px)!important;max-width:900px!important;}
  .ars-editor-stage-wrap.ars-editor-view-large #ars-editor-stage.ars-editor-stage.ars-voucher.ars-custom-layout{width:900px!important;max-width:none!important;}
}

/* v2.2.3 – Frontend geometry lock for Extendable and other block-theme styles.
 * Custom voucher fields use the saved A6 mm coordinates converted to percentages.
 * The voucher itself and its inner canvas are explicit containing blocks so theme
 * rules cannot turn the fields into normal-flow elements or add margins/padding.
 */
.ars-public-voucher .ars-voucher.ars-custom-layout{
  position:relative!important;
  display:block!important;
  width:148mm!important;
  height:105mm!important;
  max-width:100%!important;
  min-width:0!important;
  min-height:0!important;
  margin:30px auto!important;
  padding:0!important;
  box-sizing:border-box!important;
  overflow:hidden!important;
  isolation:isolate!important;
}
.ars-public-voucher .ars-voucher.ars-custom-layout > .ars-voucher-inner{
  position:relative!important;
  display:block!important;
  width:100%!important;
  height:100%!important;
  min-width:0!important;
  min-height:0!important;
  margin:0!important;
  padding:0!important;
  box-sizing:border-box!important;
  overflow:hidden!important;
  isolation:isolate!important;
}
.ars-public-voucher .ars-voucher.ars-custom-layout > .ars-voucher-inner > .ars-field{
  position:absolute!important;
  display:block!important;
  margin:0!important;
  padding:0!important;
  box-sizing:border-box!important;
  float:none!important;
  clear:none!important;
  flex:none!important;
  grid-area:auto!important;
  transform-origin:center center!important;
}
.ars-public-voucher .ars-voucher.ars-custom-layout > .ars-voucher-inner > .ars-field img{
  display:block!important;
  max-width:100%!important;
  max-height:100%!important;
  margin:0!important;
  padding:0!important;
}
@media(max-width:700px){
  .ars-public-voucher .ars-voucher.ars-custom-layout{
    width:100%!important;
    height:auto!important;
    aspect-ratio:148/105!important;
    margin:20px auto!important;
  }
  .ars-public-voucher .ars-voucher.ars-custom-layout > .ars-voucher-inner{
    width:100%!important;height:100%!important;
  }
}
@media print{
  .ars-public-voucher .ars-voucher.ars-custom-layout{
    width:148mm!important;height:105mm!important;max-width:none!important;margin:0!important;
  }
}

/* v2.2.4 – Frontend: responsive A6 display with proportional editor typography. */
.ars-public-voucher .ars-voucher.ars-custom-layout{
  container-type:inline-size!important;
  width:min(1100px,100%)!important;
  max-width:1100px!important;
  height:auto!important;
  aspect-ratio:148/105!important;
  margin:30px auto!important;
}
.ars-public-voucher .ars-voucher.ars-custom-layout > .ars-voucher-inner{
  width:100%!important;height:100%!important;
}
.ars-public-voucher .ars-voucher.ars-custom-layout > .ars-voucher-inner > .ars-field{
  position:absolute!important;
}
@media(max-width:700px){
  .ars-public-voucher .ars-voucher.ars-custom-layout{width:100%!important;max-width:100%!important;margin:20px auto!important;}
}
@media print{
  .ars-public-voucher .ars-voucher.ars-custom-layout{width:148mm!important;height:105mm!important;max-width:none!important;aspect-ratio:auto!important;margin:0!important;}
}

/* v2.2.8 – Frontend renderer lock.
 * The PHP renderer writes the exact A6 percentages directly on each field.
 * No CSS custom properties are used for geometry, avoiding theme collisions.
 */
.ars-public-voucher .ars-voucher.ars-custom-layout{
  position:relative!important;display:block!important;box-sizing:border-box!important;
  float:none!important;clear:both!important;flex:none!important;grid:none!important;
  padding:0!important;overflow:hidden!important;isolation:isolate!important;
  container-type:inline-size!important;
  width:min(1100px,100%)!important;max-width:1100px!important;height:auto!important;
  aspect-ratio:148/105!important;margin:30px auto!important;
}
.ars-public-voucher .ars-voucher.ars-custom-layout > .ars-voucher-inner{
  position:relative!important;display:block!important;width:100%!important;height:100%!important;
  margin:0!important;padding:0!important;box-sizing:border-box!important;overflow:hidden!important;
}
.ars-public-voucher .ars-voucher.ars-custom-layout > .ars-voucher-inner > .ars-field{
  position:absolute!important;inset:auto!important;right:auto!important;bottom:auto!important;
  display:block!important;float:none!important;clear:none!important;flex:none!important;grid-area:auto!important;
  margin:0!important;padding:0!important;box-sizing:border-box!important;transform-origin:center center!important;
}
.ars-public-voucher .ars-voucher.ars-custom-layout > .ars-voucher-inner > .ars-field img{
  display:block!important;width:100%!important;height:100%!important;max-width:none!important;max-height:none!important;
  object-fit:contain!important;margin:0!important;padding:0!important;border:0!important;
}
@media(max-width:700px){
  .ars-public-voucher .ars-voucher.ars-custom-layout{width:100%!important;max-width:100%!important;margin:20px auto!important;}
}
@media print{
  .ars-public-voucher .ars-voucher.ars-custom-layout{width:148mm!important;height:105mm!important;max-width:none!important;aspect-ratio:auto!important;margin:0!important;}
}


/* v2.2.9 – IMPORTANT: the checkout shortcode is not rendered inside
 * body.ars-public-voucher.  The public purchase form uses .ars-gutschein-app.
 * Therefore the same A6 geometry rules must explicitly target the shortcode
 * preview as well.  This is the missing selector that caused Extendable/theme
 * styles to control the fields instead of the saved layout coordinates.
 */
.ars-gutschein-app #ars-preview .ars-voucher.ars-custom-layout{
  position:relative!important;
  display:block!important;
  float:none!important;
  clear:both!important;
  flex:none!important;
  grid:none!important;
  box-sizing:border-box!important;
  width:min(1100px,100%)!important;
  max-width:1100px!important;
  min-width:0!important;
  height:auto!important;
  aspect-ratio:148/105!important;
  margin:30px auto!important;
  padding:0!important;
  overflow:hidden!important;
  isolation:isolate!important;
  container-type:inline-size!important;
  background-repeat:no-repeat!important;
  background-position:center!important;
  background-size:cover!important;
}
.ars-gutschein-app #ars-preview .ars-voucher.ars-custom-layout > .ars-voucher-inner{
  position:relative!important;
  display:block!important;
  width:100%!important;
  height:100%!important;
  min-width:0!important;
  min-height:0!important;
  margin:0!important;
  padding:0!important;
  box-sizing:border-box!important;
  overflow:hidden!important;
  isolation:isolate!important;
}
.ars-gutschein-app #ars-preview .ars-voucher.ars-custom-layout > .ars-voucher-inner > .ars-field{
  position:absolute!important;
  inset:auto!important;
  right:auto!important;
  bottom:auto!important;
  display:block!important;
  float:none!important;
  clear:none!important;
  flex:none!important;
  grid-area:auto!important;
  margin:0!important;
  padding:0!important;
  box-sizing:border-box!important;
  min-width:0!important;
  min-height:0!important;
  transform-origin:center center!important;
}
.ars-gutschein-app #ars-preview .ars-voucher.ars-custom-layout > .ars-voucher-inner > .ars-field img{
  display:block!important;
  width:100%!important;
  height:100%!important;
  max-width:none!important;
  max-height:none!important;
  object-fit:contain!important;
  margin:0!important;
  padding:0!important;
  border:0!important;
}
.ars-gutschein-app #ars-preview .ars-voucher.ars-custom-layout .ars-layout-overlay{
  position:absolute!important;
  inset:0!important;
  margin:0!important;
  padding:0!important;
  z-index:1!important;
  pointer-events:none!important;
}
.ars-gutschein-app #ars-preview .ars-voucher.ars-custom-layout .ars-field{
  z-index:3!important;
}
@media(max-width:700px){
  .ars-gutschein-app #ars-preview .ars-voucher.ars-custom-layout{
    width:100%!important;
    max-width:100%!important;
    margin:20px auto!important;
  }
}

/* v2.2.13 – Druckbutton auch auf der Gutschein-Kaufseite. Beim Drucken wird
 * ausschließlich die Gutschein-Vorschau ausgegeben; Formular, PayPal und
 * sonstige Theme-Inhalte bleiben außerhalb des Druckbereichs. */
@media print{
  @page{size:A6 landscape;margin:0;}
  html,body{width:148mm!important;height:105mm!important;margin:0!important;padding:0!important;}
  body:has(.ars-gutschein-app){background:#fff!important;}
  body:has(.ars-gutschein-app) .ars-gutschein-app{width:148mm!important;max-width:148mm!important;margin:0!important;padding:0!important;}
  body:has(.ars-gutschein-app) .ars-gutschein-app > *{display:none!important;}
  body:has(.ars-gutschein-app) .ars-gutschein-app #ars-preview{display:block!important;width:148mm!important;height:105mm!important;margin:0!important;padding:0!important;}
  body:has(.ars-gutschein-app) .ars-gutschein-app #ars-preview .ars-voucher{display:block!important;width:148mm!important;height:105mm!important;max-width:148mm!important;min-width:148mm!important;margin:0!important;box-shadow:none!important;aspect-ratio:auto!important;}
  body:has(.ars-gutschein-app) .ars-gutschein-app .ars-print{display:none!important;}
}

/* v2.2.15 – complete A6 editor visibility. The internal 1480x1050 canvas is scaled
 * to the visible stage instead of being clipped by a fixed viewport. The wrapper
 * may scroll with the page, so the complete 148:105 voucher remains visible. */
.ars-editor-stage-wrap{
  overflow:auto!important;
  max-height:none!important;
  min-height:0!important;
  align-items:flex-start!important;
}
#ars-editor-stage.ars-editor-stage.ars-voucher.ars-custom-layout{
  flex:0 0 auto!important;
  max-height:none!important;
  min-height:0!important;
  overflow:hidden!important;
}
#ars-editor-stage .ars-editor-canvas{
  transform-origin:top left!important;
  overflow:hidden!important;
}
.ars-editor-stage-wrap.ars-editor-view-large{
  max-height:none!important;
  min-height:0!important;
}

/* v2.2.16 – cleaner public purchase frontend */
.ars-gutschein-app{max-width:980px;margin:30px auto;padding:0 16px;color:#eef3f7;}
.ars-shop-head{text-align:center;margin:0 auto 22px;}
.ars-shop-kicker{display:block;font-size:11px;letter-spacing:2.5px;text-transform:uppercase;opacity:.65;margin-bottom:6px;}
.ars-shop-head h2{font-size:28px;line-height:1.15;margin:0 0 7px;font-weight:700;letter-spacing:.2px;}
.ars-shop-head p{margin:0;color:#aeb8c0;font-size:14px;line-height:1.45;}
.ars-shop-card,.ars-shop-preview-card{background:rgba(23,26,28,.96);border:1px solid rgba(255,255,255,.10);border-radius:14px;padding:18px 20px;margin:0 0 14px;box-shadow:0 8px 28px rgba(0,0,0,.18);}
.ars-shop-step{display:flex;align-items:center;gap:11px;margin-bottom:14px;}
.ars-shop-step>span{display:flex;align-items:center;justify-content:center;width:28px;height:28px;flex:0 0 28px;border-radius:50%;background:#135e96;color:#fff;font-size:13px;font-weight:700;}
.ars-shop-step strong{display:block;font-size:15px;line-height:1.2;}
.ars-shop-step small{display:block;color:#8f9aa2;font-size:12px;margin-top:3px;}
.ars-form-section{min-width:0;}
.ars-amount-row{display:flex;justify-content:flex-start;}
.ars-gutschein-app .ars-amount{gap:6px;}
.ars-gutschein-app .ars-amount button{width:38px;height:38px;font-size:20px;border:1px solid #4a555d;background:#242a2f;color:#fff;border-radius:7px;cursor:pointer;}
.ars-gutschein-app .ars-amount input{width:105px;height:38px;padding:6px 9px;margin:0;border:1px solid #4a555d;background:#101416;color:#fff;border-radius:7px;text-align:center;font-size:16px;font-weight:600;}
.ars-gutschein-app .ars-amount span{font-size:16px;font-weight:600;}
.ars-gutschein-app .ars-quick{gap:7px;margin-top:10px;}
.ars-gutschein-app .ars-quick button{padding:7px 11px;font-size:12px;border-radius:6px;border:1px solid #4a555d;background:#20262a;color:#eaf0f4;cursor:pointer;}
.ars-gutschein-app .ars-quick button:hover{border-color:#7d98aa;}
.ars-gutschein-app .ars-layouts{display:flex;flex-wrap:nowrap;gap:12px;overflow-x:auto;overflow-y:hidden;padding:3px 2px 12px;scrollbar-width:auto;scroll-behavior:smooth;overscroll-behavior-x:contain;}
.ars-gutschein-app .ars-layouts::-webkit-scrollbar{height:10px;}
.ars-gutschein-app .ars-layouts::-webkit-scrollbar-track{background:#1a2024;border-radius:10px;}
.ars-gutschein-app .ars-layouts::-webkit-scrollbar-thumb{background:#52616b;border-radius:10px;}
.ars-gutschein-app .ars-layouts::-webkit-scrollbar-thumb:hover{background:#6f8492;}
.ars-gutschein-app .ars-layout{flex:0 0 310px;width:310px;max-width:none;border:1px solid #424c53;border-radius:9px;background:#101416;scroll-snap-align:start;}
.ars-gutschein-app .ars-layout.active{border-color:#6f9ab5;box-shadow:0 0 0 1px #6f9ab544;}
.ars-gutschein-app .ars-layout-thumb{min-height:90px;border-radius:8px 8px 0 0;}
.ars-gutschein-app .ars-layout-copy{padding:9px 10px;}
.ars-gutschein-app .ars-layout-copy strong{font-size:13px;line-height:1.25;}
.ars-gutschein-app .ars-layout-copy small{font-size:11px;line-height:1.35;}
.ars-buyer-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px;}
.ars-buyer-grid label{font-size:12px;font-weight:600;color:#dce3e8;}
.ars-buyer-grid label span{font-weight:400;color:#89949c;}
.ars-buyer-grid input{width:100%;box-sizing:border-box;padding:9px 10px;margin-top:5px;height:40px;border:1px solid #465159;background:#101416;color:#fff;border-radius:7px;font-size:14px;}
.ars-buyer-note{grid-column:1/-1;margin:0;color:#7f8b93;font-size:11px;line-height:1.4;}
.ars-shop-preview-card{padding-bottom:20px;}
.ars-preview-head{margin-bottom:4px;}
.ars-preview-head strong{font-size:15px;}
.ars-preview-head small{display:block;color:#8f9aa2;font-size:12px;margin-top:3px;}
.ars-shop-preview-card #ars-preview{margin-top:10px;}
.ars-shop-preview-card #ars-preview .ars-voucher{margin:0 auto;box-shadow:0 12px 35px rgba(0,0,0,.28);}
.ars-gutschein-app #ars-paypal{max-width:520px;margin:14px auto 0;}
.ars-gutschein-app #ars-result{max-width:700px;margin:12px auto 0;}
.ars-gutschein-app .ars-paypal-note,.ars-gutschein-app .ars-paypal-error,.ars-gutschein-app .ars-paypal-success{font-size:13px;line-height:1.45;}
@media(max-width:850px){.ars-gutschein-app .ars-layout{flex-basis:280px;width:280px;}}
@media(max-width:600px){
 .ars-gutschein-app{margin:20px auto;padding:0 10px;}
 .ars-shop-card,.ars-shop-preview-card{padding:15px;}
 .ars-shop-head h2{font-size:23px;}
 .ars-buyer-grid{grid-template-columns:1fr;}
 .ars-buyer-note{grid-column:auto;}
 .ars-gutschein-app .ars-layout{flex-basis:270px;width:270px;}
}

/* v2.2.17 – Druckbutton direkt unter der Frontend-Vorschau. */
.ars-front-print-wrap{display:flex;justify-content:center;margin:18px 0 4px;}
.ars-front-print{margin:0!important;cursor:pointer;}
@media print{.ars-front-print-wrap{display:none!important;}}

/* v2.2.63: Explicit public preview state. The voucher itself remains the single A6 canvas. */
.ars-preview-data-note{position:fixed;left:-99999px;top:-99999px;width:1px;height:1px;overflow:hidden;}
@media print{
  .ars-public-voucher .ars-print{display:none!important;}
  .ars-public-voucher{margin:0!important;padding:0!important;background:#fff!important;}
  .ars-public-voucher .ars-voucher{margin:0!important;box-shadow:none!important;max-width:none!important;}
}

/* v2.2.64: Use the actual layout image as the single screen/print background. */
.ars-voucher.ars-custom-layout{background-image:none!important;}
.ars-voucher.ars-custom-layout>.ars-print-background{display:block!important;visibility:visible!important;opacity:1!important;}
.ars-voucher.ars-custom-layout>.ars-voucher-inner{z-index:2!important;}