.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%;
}

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

.w3d-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;

  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-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);
}


/* 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;
}

.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));
  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;}