.w3d-fotokugel-fields {
  margin: 1em 0;
  padding: 1em;
  border: 1px solid rgba(0,0,0,0.15);
  border-radius: 10px;
  position: relative; /* fuer Loading-Overlay */
  max-width: 100%;
  overflow-x: hidden; /* verhindert horizontales Scrollen auf Mobile */

  /*
    Wunschtext Safe-Zone (kannst du im Theme ueberschreiben)

    Diese Insets definieren die "sichere" Textflaeche im Overlay der Hintergrundvorschau.

    Deine Vorgabe bei einem Hintergrundbild mit 1920x1080px:
      - links/rechts: 380px  => 380/1920 = 19.7917%
      - oben/unten:   280px  => 280/1080 = 25.9259%

    Override-Beispiel (Theme / Custom CSS):
      .w3d-fotokugel-fields{ --w3d-text-safe-inset-x: 20%; --w3d-text-safe-inset-y: 26%; }
  */
  --w3d-text-safe-inset-x: 19.7917%; /* links/rechts */
  --w3d-text-safe-inset-y: 25.9259%; /* oben/unten */
}

/* Box sizing in unserem Container: verhindert "zu breite" Elemente durch Padding */
.w3d-fotokugel-fields,
.w3d-fotokugel-fields *{
  box-sizing: border-box;
}

.w3d-fotokugel-fields .w3d-label {
  display: block;
  margin: 0.8em 0 0.3em;
  font-weight: 600;
}

.w3d-fotokugel-fields .w3d-hint {
  margin-top: 0.35em;
  font-size: 0.92em;
  opacity: 0.9;
}

.w3d-status {
  margin-top: 0.75em;
  font-size: 0.95em;
}

.w3d-status.error {
  color: #b32d2e;
}

.w3d-status.success {
  color: #1d6f42;
}

.w3d-preview-wrap {
  margin-top: 0.9em;
  padding: 0.9em;
  border: 1px dashed rgba(0,0,0,0.25);
  border-radius: 10px;
  max-width: 520px;
  width: 100%;
  overflow: hidden;
  overflow: clip;
  scrollbar-width: none;
  -ms-overflow-style: none;
}

.w3d-preview-wrap,
.w3d-preview-box,
.w3d-second-photo-preview .w3d-preview-box{
  overscroll-behavior: none;
  -webkit-overflow-scrolling: auto;
  contain: paint;
}

.w3d-preview-box,
.w3d-second-photo-preview .w3d-preview-box{
  position: relative;
  line-height: 0;
  font-size: 0;
}

.w3d-preview-wrap::-webkit-scrollbar,
.w3d-preview-box::-webkit-scrollbar,
.w3d-second-photo-preview .w3d-preview-box::-webkit-scrollbar{
  width: 0;
  height: 0;
  display: none;
}

.w3d-preview-title {
  font-weight: 600;
  margin-bottom: 0.6em;
}

.w3d-preview-img,
.w3d-second-photo-preview-img{
  display: block;
  width: 100%;
  height: 100%;
  max-height: none;
  object-fit: contain !important; /* wichtig: nicht croppen */
  background: rgba(255,255,255,0.9);
  border-radius: 8px;
  vertical-align: top;
  pointer-events: none;
  -webkit-user-drag: none;
  user-select: none;

  width: 100% !important;
  height: 100% !important;
  max-width: 100% !important;
  max-height: 100% !important;
  object-position: center !important;
}

/* Disabled Buttons */
form.cart button.w3d-disabled {
  opacity: 0.55;
  cursor: not-allowed;
}


/* Checkbox-Layout (kleiner & kompakter) */
.w3d-legal{
  margin: 0.8em 0 0.2em;
  font-size: 12px;
  line-height: 1.35;
}
.w3d-legal-item{
  display:block;
  margin: 0.45em 0;
}
.w3d-legal-item input{
  margin-right: 0.5em;
  transform: translateY(1px);
}
.w3d-preview-hint{
  font-size: 0.9em;
  margin: 0.6em 0 0;
}


/* Modernes Upload-UI (Foto) */
.w3d-file-field{
  position: relative;
  display: inline-flex;
  align-items: center;
  gap: 10px;
  max-width: 100%;
  flex-wrap: wrap; /* Mobile: Button darf umbrechen statt zu ueberlaufen */
}

/* Natives File-Input verbergen (damit kein Dateiname angezeigt wird) */
.w3d-file-input{
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  clip-path: inset(50%);
  border: 0;
  white-space: nowrap;
  opacity: 0;
}

.w3d-file-btn{
  appearance: none;
  -webkit-appearance: none;
  border: 1px solid rgba(0,0,0,0.18);
  border-radius: 12px;
  padding: 12px 16px;
  background: #fff;
  font-size: 14px;
  line-height: 1;
  cursor: pointer;
  box-shadow: 0 2px 10px rgba(0,0,0,0.04);
  transition: transform 120ms ease, box-shadow 120ms ease, border-color 120ms ease;
  max-width: 100%;
  white-space: normal;
}

/* Mobile: Upload-Button und Felder auf volle Breite */
@media (max-width: 640px){
  .w3d-file-field{ display:flex; width:100%; }
  .w3d-file-btn{ width:100%; }
  .w3d-retry-btn{ width:100%; }
}

.w3d-file-btn:hover{
  border-color: rgba(0,0,0,0.30);
  box-shadow: 0 3px 14px rgba(0,0,0,0.08);
  transform: translateY(-1px);
}

.w3d-file-btn:focus{
  outline: none;
  border-color: rgba(0,0,0,0.35);
  box-shadow: 0 3px 14px rgba(0,0,0,0.10);
}

.w3d-file-btn:active{
  transform: translateY(1px);
}

.w3d-retry-btn{
  appearance: none;
  -webkit-appearance: none;
  border: 1px solid rgba(0,0,0,0.18);
  border-radius: 12px;
  padding: 12px 16px;
  background: #fff;
  font-size: 14px;
  line-height: 1;
  cursor: pointer;
  box-shadow: 0 2px 10px rgba(0,0,0,0.04);
  transition: transform 120ms ease, box-shadow 120ms ease, border-color 120ms ease, opacity 120ms ease;
  max-width: 100%;
  white-space: normal;
}

.w3d-retry-btn:hover{
  border-color: rgba(0,0,0,0.30);
  box-shadow: 0 3px 14px rgba(0,0,0,0.08);
  transform: translateY(-1px);
}

.w3d-retry-btn:focus{
  outline: none;
  border-color: rgba(0,0,0,0.35);
  box-shadow: 0 3px 14px rgba(0,0,0,0.10);
}

.w3d-retry-btn:active{
  transform: translateY(1px);
}

.w3d-retry-btn[disabled]{
  opacity: .6;
  cursor: wait;
}


/* Modernes Dropdown + Mini-Vorschau (Hintergrund) */
.w3d-bg-field{
  margin-top: 0.9em;
  max-width: 520px;
  width: 100%;
}
.w3d-select{
  position: relative;
  max-width: 520px;
  width: 100%;
}
.w3d-select select{
  width: 100%;
  box-sizing: border-box;
  appearance: none;
  -webkit-appearance: none;
  -moz-appearance: none;
  padding: 12px 40px 12px 14px;
  border: 1px solid rgba(0,0,0,0.18);
  border-radius: 12px;
  background: #fff;
  font-size: 14px;
  line-height: 1.2;
  box-shadow: 0 2px 10px rgba(0,0,0,0.04);
}
.w3d-select:after{
  content: "▾";
  position: absolute;
  right: 14px;
  top: 50%;
  transform: translateY(-50%);
  pointer-events: none;
  opacity: 0.6;
}
.w3d-select select:focus{
  outline: none;
  border-color: rgba(0,0,0,0.35);
  box-shadow: 0 3px 14px rgba(0,0,0,0.08);
}
.w3d-bg-preview{
  /* gleiche Groesse/Optik wie Foto-Vorschau */
  margin-top: 0.9em;
  padding: 0.9em;
  border: 1px dashed rgba(0,0,0,0.25);
  border-radius: 10px;
  max-width: 520px;
  width: 100%;
}

.w3d-bg-preview-inner{
  position: relative;
  border-radius: 8px;
  overflow: hidden;
  background: rgba(255,255,255,0.9);
  min-height: 170px;
  aspect-ratio: 16 / 9; /* Hintergruende sind 1920x1080 */
}

.w3d-bg-preview-img{
  display: block;
  width: 100%;
  height: 100%;
  max-height: none;
  object-fit: contain !important; /* nicht croppen */
  background: rgba(255,255,255,0.9);
  border-radius: 8px;

  width: 100% !important;
  height: 100% !important;
  max-width: 100% !important;
  max-height: 100% !important;
  object-position: center !important;
}

/* Wunschtext Overlay innerhalb der Hintergrundvorschau */
.w3d-bg-overlay{
  position: absolute;
  inset: 0;
  pointer-events: none;
}

/* Wenn ein Composite-Bild gerendert wird, brauchen wir kein DOM-Overlay mehr */
.w3d-bg-preview-inner.w3d-composite-ready .w3d-bg-overlay{
  display: none;
}

.w3d-text-safe-area{
  position: absolute;
  inset: var(--w3d-text-safe-inset-y) var(--w3d-text-safe-inset-x);
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  overflow: hidden;
}

/* Wunschtext UI */
.w3d-text-field{
  margin-top: 0.9em;
  max-width: 520px;
  width: 100%;
}

/* Loading Overlay */
.w3d-loading-overlay{
  position:absolute;
  inset:0;
  z-index: 1000;
  display:flex;
  align-items:center;
  justify-content:center;
  background: rgba(255,255,255,0.85);
  border-radius: 10px;
  backdrop-filter: blur(1px);
}
.w3d-loading-panel{
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  gap: 8px;
  padding: 14px 16px;
  border: 1px solid rgba(0,0,0,0.12);
  border-radius: 14px;
  background: rgba(255,255,255,0.95);
  box-shadow: 0 14px 44px rgba(0,0,0,0.12);
  max-width: calc(100% - 48px);
  text-align:center;
}
.w3d-loading-title{
  font-weight: 700;
  font-size: 14px;
}
.w3d-loading-sub{
  font-size: 12px;
  opacity: 0.85;
}
.w3d-spinner{
  width: 26px;
  height: 26px;
  border-radius: 50%;
  border: 3px solid rgba(0,0,0,0.18);
  border-top-color: rgba(0,0,0,0.55);
  animation: w3dSpin 0.9s linear infinite;
}
@keyframes w3dSpin{ to{ transform: rotate(360deg); } }

/* WooCommerce Attribut-Dropdowns (z.B. Beleuchtung) auf Mobile sauber ausrichten */
@media (max-width: 820px){
  body.single-product form.cart table.variations{ width:100%; table-layout: fixed; }
  body.single-product form.cart table.variations td.label{ width: 38%; white-space: nowrap; }
  body.single-product form.cart table.variations td.value{ width: 62%; }
  body.single-product form.cart table.variations td.value select{ width:100%; max-width:100%; }
}

/* Sehr schmale Screens: Label ueber Select (kein seitliches "ueberhaengen") */
@media (max-width: 520px){
  body.single-product form.cart table.variations tr,
  body.single-product form.cart table.variations td{ display:block; width:100%; }
  body.single-product form.cart table.variations td.value{ margin-top: 6px; }
}

/*
  Mobile: Attribute-Dropdowns (z.B. "Beleuchtung") sollen auf Smartphones
  genauso breit sein wie der Personalisierungs-Container.

  Einige Themes setzen feste Breiten oder flex/table Layouts, die das Select
  zu schmal machen. Deshalb erzwingen wir auf Mobile eine gestapelte Darstellung
  (Label oben, Select darunter) und volle Breite.
*/
@media (max-width: 820px){
  body.single-product .woocommerce div.product form.cart table.variations,
  body.single-product .woocommerce div.product form.cart table.variations tbody,
  body.single-product .woocommerce div.product form.cart table.variations tr,
  body.single-product .woocommerce div.product form.cart table.variations td,
  body.single-product .woocommerce div.product form.cart table.variations th{
    display: block !important;
    width: 100% !important;
    max-width: 100% !important;
  }

  body.single-product .woocommerce div.product form.cart table.variations td.label,
  body.single-product .woocommerce div.product form.cart table.variations th.label{
    margin: 0 0 6px 0 !important;
    white-space: normal !important;
  }

  body.single-product .woocommerce div.product form.cart table.variations td.value{
    margin: 0 0 12px 0 !important;
  }

  body.single-product .woocommerce div.product form.cart table.variations select,
  body.single-product .woocommerce div.product form.cart table.variations .select2-container{
    width: 100% !important;
    max-width: 100% !important;
  }
}

/*
  Fix: Einige Mobile-Themes schneiden das Variations-Select (z.B. "Beleuchtung") rechts ab.
  Ursache ist meist eine Kombination aus table/flex-layout + overflow hidden + min-width Regeln.
  Wir erzwingen daher auf Mobile: volle Breite, min-width:0 und overflow sichtbar.
*/
@media (max-width: 820px){
  body.single-product .woocommerce div.product form.cart,
  body.single-product .woocommerce div.product form.cart .variations_form,
  body.single-product .woocommerce div.product form.cart table.variations,
  body.single-product .woocommerce div.product form.cart table.variations td,
  body.single-product .woocommerce div.product form.cart table.variations th,
  body.single-product .woocommerce div.product form.cart table.variations td.value,
  body.single-product .woocommerce div.product form.cart table.variations td.value *{
    max-width: 100% !important;
    min-width: 0 !important;
  }

  body.single-product .woocommerce div.product form.cart table.variations td.value{
    overflow: visible !important;
  }

  body.single-product .woocommerce div.product form.cart table.variations select{
    display: block !important;
    width: 100% !important;
    box-sizing: border-box !important;
  }

  /* Falls Select2 aktiv ist */
  body.single-product .woocommerce div.product form.cart table.variations .select2-container,
  body.single-product .woocommerce div.product form.cart .select2-container{
    width: 100% !important;
    max-width: 100% !important;
  }

  body.single-product .woocommerce div.product form.cart .select2-container .select2-selection--single{
    width: 100% !important;
    max-width: 100% !important;
    box-sizing: border-box !important;
  }
}

.w3d-text-btn{
  appearance: none;
  -webkit-appearance: none;
  border: 1px solid rgba(0,0,0,0.18);
  border-radius: 12px;
  padding: 12px 16px;
  background: #fff;
  font-size: 14px;
  line-height: 1;
  cursor: pointer;
  box-shadow: 0 2px 10px rgba(0,0,0,0.04);
  transition: transform 120ms ease, box-shadow 120ms ease, border-color 120ms ease;
}

.w3d-text-btn:hover{
  border-color: rgba(0,0,0,0.30);
  box-shadow: 0 3px 14px rgba(0,0,0,0.08);
  transform: translateY(-1px);
}

.w3d-text-btn:focus{
  outline: none;
  border-color: rgba(0,0,0,0.35);
  box-shadow: 0 3px 14px rgba(0,0,0,0.10);
}

.w3d-text-btn:active{
  transform: translateY(1px);
}

.w3d-text-lines{
  font-family: "Times New Roman", Times, serif;
  font-style: italic;
  font-weight: 700;
  color: #969696;
  text-align: center;
  line-height: 1.08;
  font-size: clamp(20px, 3.6vw, 40px);
  width: 100%;
  /*
    Layout als Spalte, damit jede Zeile als inline-block "auf ihre echte Textbreite"
    messen kann (wichtig fuer Auto-Fit bei sehr langen Woertern wie WWWWW...).
  */
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;

  /* Wichtig: keine automatischen Umbrueche innerhalb einer Zeile */
  word-break: normal;
  overflow: hidden;
}

.w3d-text-line{
  margin: 0;
  padding: 0;
  display: inline-block;
  white-space: nowrap;
}

.w3d-text-lines[data-lines="0"] .w3d-text-line{
  display: none;
}

.w3d-text-lines[data-lines="1"] .w3d-text-line-1,
.w3d-text-lines[data-lines="1"] .w3d-text-line-3{
  display: none;
}

.w3d-text-lines[data-lines="2"] .w3d-text-line-3{
  display: none;
}

.w3d-text-lines[data-lines="2"] .w3d-text-line-1{
  font-size: .75em; /* 1/4 kleiner als Zeile 2 */
}

.w3d-text-lines[data-lines="3"] .w3d-text-line-1,
.w3d-text-lines[data-lines="3"] .w3d-text-line-3{
  font-size: .75em; /* 1/4 kleiner als Zeile 2 */
}

/* Modal */
.w3d-modal{
  position: fixed;
  inset: 0;
  z-index: 99999;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 16px;
}

.w3d-modal-backdrop{
  position: absolute;
  inset: 0;
  background: rgba(0,0,0,0.45);
}

.w3d-modal-dialog{
  position: relative;
  width: min(520px, calc(100% - 32px));
  max-height: calc(100dvh - 32px);
  overflow-y: auto;
  overscroll-behavior: contain;
  background: #fff;
  border-radius: 18px;
  padding: 16px;
  box-shadow: 0 24px 80px rgba(0,0,0,0.25);
  border: 1px solid rgba(0,0,0,0.12);
}

.w3d-modal-title{
  margin: 0 0 6px;
  font-size: 16px;
  font-weight: 700;
}

.w3d-modal-hint{
  margin: 0 0 10px;
  font-size: 12px;
  opacity: 0.8;
}

.w3d-textarea{
  width: 100%;
  box-sizing: border-box;
  border: 1px solid rgba(0,0,0,0.18);
  border-radius: 12px;
  padding: 12px;
  font-size: 14px;
  line-height: 1.35;
  resize: none;
  min-height: 110px;
}

.w3d-textarea:focus{
  outline: none;
  border-color: rgba(0,0,0,0.35);
  box-shadow: 0 3px 14px rgba(0,0,0,0.08);
}

.w3d-modal-error{
  margin-top: 10px;
  font-size: 12px;
  color: #b32d2e;
}

.w3d-modal-actions{
  margin-top: 12px;
  display: flex;
  justify-content: flex-end;
  gap: 10px;
}

.w3d-modal-actions button{
  appearance: none;
  -webkit-appearance: none;
  border: 1px solid rgba(0,0,0,0.18);
  border-radius: 12px;
  padding: 10px 14px;
  background: #fff;
  font-size: 13px;
  cursor: pointer;
  transition: transform 120ms ease, box-shadow 120ms ease, border-color 120ms ease;
  box-shadow: 0 2px 10px rgba(0,0,0,0.04);
}

.w3d-modal-actions button:hover{
  border-color: rgba(0,0,0,0.30);
  box-shadow: 0 3px 14px rgba(0,0,0,0.08);
  transform: translateY(-1px);
}

.w3d-modal-actions button:active{
  transform: translateY(1px);
}

.w3d-modal-actions .w3d-modal-ok{
  border-color: rgba(0,0,0,0.25);
}

/* -------------------------------------------------------------
   (Side-)Cart: Meta-Layout / Wunschtext (2.2.4.x)
--------------------------------------------------------------*/
.w3d-cart-text{
  white-space: pre-line;
  display: inline-block;
}

/* Viele Side-Carts rendern dl.variation als Flex; dt haengt dann optisch an der letzten Textzeile.
   Fuer Wunschtext den Key oben an Zeile 1 anheften. */
dl.variation dt.variation-wunschtext,
dl.variation dt.variation-w3d-wunschtext{
  align-self: flex-start;
}
dl.variation dd.variation-wunschtext,
dl.variation dd.variation-w3d-wunschtext{
  white-space: pre-line;
}

/* -------------------------------------------------------------
   Side-/Mini-Cart Qty Fix (2.2.4.3)
--------------------------------------------------------------*/
.w3d-qty-disabled{pointer-events:none !important; opacity:0.6;}
.w3d-qty-busy{cursor:progress;}


/* -------------------------------------------------------------
   2.3.5: Optionale zweite Gestaltung, optisch nah an 2.2.5
--------------------------------------------------------------*/
.w3d-secondary-choice,
.w3d-secondary-panel,
.w3d-second-photo-preview{
  margin-top: 0.9em;
  max-width: 520px;
  width: 100%;
}

.w3d-secondary-option{
  display: block;
  margin: 0.4em 0;
}

.w3d-secondary-option input{
  margin-right: 0.5em;
  transform: translateY(1px);
}

.w3d-second-photo-preview .w3d-preview-box{
  border-radius: 8px;
  overflow: hidden;
  overflow: clip;
  background: rgba(255,255,255,0.9);
  aspect-ratio: var(--w3d-preview-aspect, 3 / 2);
  scrollbar-width: none;
  -ms-overflow-style: none;
}

@media (max-width: 640px){
  .w3d-secondary-choice,
  .w3d-secondary-panel,
  .w3d-second-photo-preview{
    max-width: 100%;
  }
}


.w3d-preview-box{
  border-radius: 8px;
  overflow: hidden;
  overflow: clip;
  background: rgba(255,255,255,0.9);
  aspect-ratio: var(--w3d-preview-aspect, 3 / 2);
  scrollbar-width: none;
  -ms-overflow-style: none;
}

.w3d-crop-actions{
  margin-top: 0.8em;
}

.w3d-crop-hint{
  margin: 0 0 0.6em;
  font-size: 0.92em;
  color: #1f2937;
}

/* Bild-Check Hinweise (nur Analyse, keine Bildänderung) */
.w3d-quality-hint,
.w3d-crop-hint.is-good,
.w3d-crop-hint.is-warn,
.w3d-crop-hint.is-bad{
  margin: 0.6em 0 0.8em;
  padding: 10px 12px;
  border-radius: 12px;
  border: 1px solid rgba(0,0,0,0.10);
  background: #f8fafc;
  color: #111827;
  font-size: 0.93em;
  line-height: 1.35;
}

.w3d-quality-hint.is-good,
.w3d-crop-hint.is-good{
  background: rgba(16, 185, 129, 0.10);
  border-color: rgba(16, 185, 129, 0.35);
}

.w3d-quality-hint.is-warn,
.w3d-crop-hint.is-warn{
  background: rgba(245, 158, 11, 0.10);
  border-color: rgba(245, 158, 11, 0.35);
}

.w3d-quality-hint.is-bad,
.w3d-crop-hint.is-bad{
  background: rgba(239, 68, 68, 0.10);
  border-color: rgba(239, 68, 68, 0.35);
}

.w3d-crop-btn,
.w3d-crop-reset{
  appearance: none;
  -webkit-appearance: none;
  border: 1px solid rgba(0,0,0,0.18);
  border-radius: 12px;
  padding: 10px 14px;
  background: #fff;
  font-size: 13px;
  cursor: pointer;
  box-shadow: 0 2px 10px rgba(0,0,0,0.04);
}

.w3d-crop-dialog{
  width: min(920px, calc(100% - 24px));
  display: flex;
  flex-direction: column;
}

.w3d-crop-original-format{
  margin-top: 12px;
  padding: 0;
  border: 0;
  background: transparent;
}

.w3d-crop-original-toggle{
  display: inline-block;
  width: auto;
  appearance: none;
  -webkit-appearance: none;
  border: 0;
  padding: 0;
  background: transparent;
  color: #000;
  font-size: 15px;
  font-weight: 700;
  line-height: 1.35;
  text-align: left;
  cursor: pointer;
}

.w3d-crop-original-toggle:hover{
  text-decoration: underline;
}

.w3d-crop-original-toggle:focus{
  outline: none;
  text-decoration: underline;
}

.w3d-crop-original-actions{
  margin-top: 8px;
}

.w3d-crop-original-apply{
  appearance: none;
  -webkit-appearance: none;
  border: 1px solid rgba(0,0,0,0.18);
  border-radius: 12px;
  padding: 10px 14px;
  background: #fff;
  color: #000;
  font-size: 13px;
  font-weight: 600;
  cursor: pointer;
  box-shadow: 0 2px 10px rgba(0,0,0,0.04);
}

.w3d-crop-original-apply:hover{
  border-color: rgba(0,0,0,0.28);
  box-shadow: 0 3px 14px rgba(0,0,0,0.08);
}

.w3d-crop-original-apply[disabled]{
  opacity: .6;
  cursor: wait;
}

.w3d-crop-stage{
  margin-top: 10px;
  display: flex;
  justify-content: center;
  min-height: 0;
}

.w3d-crop-viewport{
  --w3d-crop-max-height: 54vh;
  --w3d-crop-aspect-num: 1.5;
  position: relative;
  width: min(100%, calc(var(--w3d-crop-max-height) * var(--w3d-crop-aspect-num)));
  max-width: 100%;
  max-height: var(--w3d-crop-max-height);
  aspect-ratio: var(--w3d-crop-aspect, 3 / 2);
  min-height: 220px;
  margin: 0 auto;
  overflow: hidden;
  background: #f2f4f7;
  border-radius: 16px;
  touch-action: none;
  cursor: grab;
  user-select: none;
}

.w3d-crop-viewport:active{
  cursor: grabbing;
}

.w3d-crop-viewport.is-drag-disabled,
.w3d-crop-viewport.is-drag-disabled:active{
  cursor: default;
}

.w3d-crop-image{
  position: absolute;
  top: 0;
  left: 0;
  transform-origin: top left;
  will-change: transform;
  max-width: none !important;
  max-height: none !important;
  user-select: none;
  pointer-events: none;
  -webkit-user-drag: none;
}

.w3d-crop-frame{
  position: absolute;
  inset: 0;
  border: 3px solid #3b82f6;
  border-radius: 16px;
  pointer-events: none;
}

.w3d-crop-guide{
  position: absolute;
  left: 18px;
  right: 18px;
  height: 3px;
  border-radius: 999px;
  pointer-events: none;
  display: none;
  box-shadow: 0 0 0 1px rgba(255,255,255,0.16);
}

.w3d-crop-guide-box{
  position: absolute;
  border-radius: 10px;
  pointer-events: none;
  display: none;
  box-sizing: border-box;
}

.w3d-crop-guide-fade{
  position: absolute;
  pointer-events: none;
  display: none;
  z-index: 1;
}

.w3d-crop-guide-fade-top{
  background: linear-gradient(to top, rgba(255,255,255,0) 0%, rgba(255,255,255,1) 100%);
}

.w3d-crop-guide-fade-right{
  background: linear-gradient(to right, rgba(255,255,255,0) 0%, rgba(255,255,255,1) 100%);
}

.w3d-crop-guide-fade-bottom{
  background: linear-gradient(to bottom, rgba(255,255,255,0) 0%, rgba(255,255,255,1) 100%);
}

.w3d-crop-guide-fade-left{
  background: linear-gradient(to left, rgba(255,255,255,0) 0%, rgba(255,255,255,1) 100%);
}

.w3d-crop-guide-red-box{
  border: 4px solid rgba(255, 0, 0, 0.55);
  box-shadow: 0 0 0 1px rgba(255,255,255,0.16);
  z-index: 2;
}

.w3d-crop-guide-green{
  background: rgba(0, 200, 0, 0.55);
  z-index: 3;
}

.w3d-crop-grid{
  position: absolute;
  background: rgba(255,255,255,0.55);
  z-index: 4;
}

.w3d-crop-grid-v1,
.w3d-crop-grid-v2{
  top: 0;
  bottom: 0;
  width: 1px;
}

.w3d-crop-grid-v1{ left: 33.333%; }
.w3d-crop-grid-v2{ left: 66.666%; }

.w3d-crop-grid-h1,
.w3d-crop-grid-h2{
  left: 0;
  right: 0;
  height: 1px;
}

.w3d-crop-grid-h1{ top: 33.333%; }
.w3d-crop-grid-h2{ top: 66.666%; }

.w3d-crop-handle{
  position: absolute;
  width: 16px;
  height: 16px;
  border: 3px solid #3b82f6;
  background: #fff;
  border-radius: 4px;
}

.w3d-crop-handle-tl{ top: -8px; left: -8px; }
.w3d-crop-handle-tr{ top: -8px; right: -8px; }
.w3d-crop-handle-bl{ bottom: -8px; left: -8px; }
.w3d-crop-handle-br{ bottom: -8px; right: -8px; }

.w3d-crop-controls{
  display: flex;
  align-items: center;
  gap: 12px;
  flex-wrap: wrap;
  margin-top: 14px;
}

.w3d-crop-zoom-label{
  min-width: 48px;
}

.w3d-crop-zoom{
  flex: 1 1 220px;
}

.w3d-crop-ratios{
  display: flex;
  gap: 10px;
  margin-top: 12px;
}

.w3d-crop-ratio{
  flex: 1 1 0;
  appearance: none;
  -webkit-appearance: none;
  border: 1px solid rgba(0,0,0,0.14);
  border-radius: 12px;
  padding: 10px 12px;
  background: #fff;
  color: #111827;
  font-size: 13px;
  font-weight: 600;
  line-height: 1.2;
  cursor: pointer;
  box-shadow: 0 2px 10px rgba(0,0,0,0.04);
}

.w3d-crop-ratio.is-active{
  border-color: #3b82f6;
  background: rgba(59,130,246,0.08);
  color: #1d4ed8;
  box-shadow: 0 0 0 1px rgba(59,130,246,0.12) inset;
}

@media (max-width: 640px){
  .w3d-modal{
    align-items: flex-start;
    padding: 6px;
  }
  .w3d-crop-dialog{
    width: 100%;
    max-height: calc(100dvh - 12px);
    padding: 10px 10px calc(10px + env(safe-area-inset-bottom, 0px));
    border-radius: 14px;
    overflow-x: hidden;
  }
  .w3d-crop-stage{
    margin-top: 8px;
  }
  .w3d-crop-viewport{
    --w3d-crop-max-height: clamp(150px, 32dvh, 250px);
    min-height: 150px;
    border-radius: 14px;
  }
  .w3d-crop-grid{
    display: block;
    background: rgba(255,255,255,0.38);
  }
  .w3d-crop-controls{
    align-items: stretch;
    gap: 8px;
    margin-top: 10px;
  }
  .w3d-crop-zoom{
    flex-basis: 100%;
  }
  .w3d-crop-ratios{
    gap: 8px;
    margin-top: 10px;
    flex-wrap: wrap;
  }
  .w3d-crop-ratio{
    min-width: 0;
    flex: 1 1 calc(33.333% - 6px);
    padding: 10px 8px;
    font-size: 12px;
  }
  .w3d-modal-actions{
    position: sticky;
    bottom: 0;
    background: linear-gradient(to top, rgba(255,255,255,1) 78%, rgba(255,255,255,0.9) 100%);
    padding-top: 10px;
    padding-bottom: calc(2px + env(safe-area-inset-bottom, 0px));
    margin-top: 10px;
  }
  .w3d-modal-actions button,
  .w3d-crop-reset,
  .w3d-crop-btn,
  .w3d-crop-original-apply{
    width: 100%;
  }
}

/* =========================================================
   2.7.0: iPhone SE / Safari Crop-Modal Fix
   - robustere Viewport-Hoehen fuer iOS/Safari
   - kleine Displays bekommen eine staerker begrenzte Crop-Flaeche
   - Desktop und groessere Android-Layouts bleiben weitgehend unberuehrt
   ========================================================= */

/* Basis-Fallback: stabile Viewport-Hoehe */
.w3d-modal-dialog{
  max-height: calc(100vh - 32px);
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
}

.w3d-crop-viewport{
  --w3d-crop-max-height: 54vh;
  --w3d-crop-aspect-num: 1.5;
  width: min(100%, calc(var(--w3d-crop-max-height) * var(--w3d-crop-aspect-num)));
  max-width: 100%;
  max-height: var(--w3d-crop-max-height);
}

/* Sichtbare Hoehe bevorzugen, falls verfuegbar */
@supports (height: 100svh){
  .w3d-modal-dialog{
    max-height: calc(100svh - 32px);
  }

  .w3d-crop-viewport{
    --w3d-crop-max-height: 54svh;
  }
}

/* Dynamische Hoehe nur nutzen, wenn sauber unterstuetzt */
@supports (height: 100dvh){
  .w3d-modal-dialog{
    max-height: calc(100dvh - 32px);
  }

  .w3d-crop-viewport{
    --w3d-crop-max-height: 54dvh;
  }
}

/* Mobile allgemein */
@media (max-width: 640px){
  .w3d-modal{
    align-items: flex-start;
    padding: 6px;
  }

  .w3d-crop-dialog{
    width: 100%;
    max-height: calc(100vh - 12px);
    padding: 10px 10px calc(10px + env(safe-area-inset-bottom, 0px));
    border-radius: 14px;
    overflow-x: hidden;
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
  }

  .w3d-crop-stage{
    margin-top: 8px;
    min-height: 0;
  }

  .w3d-crop-viewport{
    --w3d-crop-max-height: clamp(150px, 32vh, 250px);
    --w3d-crop-aspect-num: 1.5;
    width: min(100%, calc(var(--w3d-crop-max-height) * var(--w3d-crop-aspect-num)));
    max-width: 100%;
    min-height: 150px;
    border-radius: 14px;
  }

  .w3d-crop-grid{
    display: block;
    background: rgba(255,255,255,0.38);
  }

  .w3d-crop-controls{
    align-items: stretch;
    gap: 8px;
    margin-top: 10px;
    position: relative;
    z-index: 2;
  }

  .w3d-crop-zoom-label{
    min-width: 0;
    display: block;
    width: 100%;
  }

  .w3d-crop-zoom{
    flex: 1 1 100%;
    width: 100%;
    min-width: 0;
  }

  .w3d-crop-ratios{
    gap: 8px;
    margin-top: 10px;
    flex-wrap: wrap;
  }

  .w3d-crop-ratio{
    min-width: 0;
    flex: 1 1 calc(33.333% - 6px);
    padding: 10px 8px;
    font-size: 12px;
  }

  .w3d-modal-actions{
    position: sticky;
    bottom: 0;
    background: linear-gradient(to top, rgba(255,255,255,1) 78%, rgba(255,255,255,0.9) 100%);
    padding-top: 10px;
    padding-bottom: calc(2px + env(safe-area-inset-bottom, 0px));
    margin-top: 10px;
    z-index: 3;
  }

  .w3d-modal-actions button,
  .w3d-crop-reset,
  .w3d-crop-btn,
  .w3d-crop-original-apply{
    width: 100%;
  }
}

/* Mobile: sichtbare Hoehe vorziehen */
@supports (height: 100svh){
  @media (max-width: 640px){
    .w3d-crop-dialog{
      max-height: calc(100svh - 12px);
    }

    .w3d-crop-viewport{
      --w3d-crop-max-height: clamp(150px, 32svh, 250px);
    }
  }
}

/* Mobile: dvh nur als letzte Prioritaet */
@supports (height: 100dvh){
  @media (max-width: 640px){
    .w3d-crop-dialog{
      max-height: calc(100dvh - 12px);
    }

    .w3d-crop-viewport{
      --w3d-crop-max-height: clamp(150px, 32dvh, 250px);
    }
  }
}

/* Sehr kleine Geraete wie iPhone SE */
@media (max-width: 640px) and (max-height: 700px){
  .w3d-crop-viewport{
    width: min(100%, 250px);
    max-height: 170px;
    min-height: 120px;
  }

  .w3d-crop-controls{
    margin-top: 8px;
  }

  .w3d-crop-ratios{
    margin-top: 8px;
  }

  .w3d-modal-actions{
    margin-top: 8px;
  }
}

/* Noch kleinere Displays zus. absichern */
@media (max-width: 640px) and (max-height: 620px){
  .w3d-crop-viewport{
    width: min(100%, 230px);
    max-height: 150px;
    min-height: 110px;
  }
}


/* 2.7.3: iPhone Safari Slider/Modal Guard */
.w3d-crop-modal.is-apple-mobile-webkit .w3d-crop-zoom{
  touch-action: none;
  -webkit-user-select: none;
  user-select: none;
}

.w3d-crop-modal.is-apple-mobile-webkit .w3d-crop-dialog{
  overscroll-behavior: contain;
}