:root{--d66-ai-panel:rgba(13,15,15,.92);--d66-ai-line:rgba(255,255,255,.14);--d66-ai-text:#f4efe5;--d66-ai-muted:#c5baaa;--d66-ai-accent:#20d7cf}.d66-ai-shell{display:grid;grid-template-columns:minmax(0,1.25fr) minmax(320px,.85fr);gap:1.2rem;margin:2rem auto;color:var(--d66-ai-text)}.d66-ai-card,.d66-ai-summary{background:linear-gradient(180deg,rgba(255,255,255,.06),rgba(255,255,255,.025)),var(--d66-ai-panel);border:1px solid var(--d66-ai-line);box-shadow:0 22px 60px rgba(0,0,0,.42);border-radius:10px;padding:1.25rem}.d66-ai-kicker{color:var(--d66-ai-accent);text-transform:uppercase;letter-spacing:.12em;font-weight:900;font-size:.78rem}.d66-ai-header h2,.d66-ai-summary h3{margin:.35rem 0 .75rem;color:#f2e8d5}.d66-ai-header p{margin:0 0 1rem;color:var(--d66-ai-muted)}.d66-ai-products{display:flex;gap:.55rem;flex-wrap:wrap;margin-bottom:1rem}.d66-ai-products button,.d66-ai-form button,.d66-ai-cart-button,.d66-ai-generate-button{border:1px solid var(--d66-ai-line);background:rgba(0,0,0,.35);color:var(--d66-ai-text);border-radius:5px;padding:.72rem 1rem;font-weight:900;cursor:pointer}.d66-ai-products button.is-active,.d66-ai-form button,.d66-ai-cart-button:not(:disabled),.d66-ai-generate-button:not(:disabled){background:linear-gradient(180deg,var(--d66-ai-accent),#0aaeb0);color:#031313;border-color:transparent}.d66-ai-chat{min-height:250px;max-height:430px;overflow:auto;padding:1rem;background:rgba(0,0,0,.28);border:1px solid rgba(255,255,255,.10);border-radius:8px;display:grid;align-content:start;gap:.75rem}.d66-ai-message{padding:.82rem .92rem;border-radius:8px;max-width:88%;line-height:1.45;white-space:pre-wrap}.d66-ai-message-bot{background:rgba(255,255,255,.08);color:var(--d66-ai-text)}.d66-ai-message-user{background:rgba(32,215,207,.18);border:1px solid rgba(32,215,207,.28);margin-left:auto}.d66-ai-form{display:grid;grid-template-columns:1fr auto;gap:.7rem;margin-top:.8rem}.d66-ai-form textarea{width:100%;resize:vertical;border-radius:5px;border:1px solid var(--d66-ai-line);background:rgba(0,0,0,.42);color:var(--d66-ai-text);padding:.8rem}.d66-ai-design-actions,.d66-ai-cart-form{display:grid;gap:.4rem;margin-top:.9rem}.d66-ai-cart-button:disabled,.d66-ai-generate-button:disabled{opacity:.45;cursor:not-allowed}.d66-ai-design-actions small,.d66-ai-cart-form small,.d66-ai-summary dd{color:var(--d66-ai-muted)}.d66-ai-summary dl{margin:1rem 0 0;display:grid;gap:.4rem}.d66-ai-summary dt{color:var(--d66-ai-accent);font-weight:900;text-transform:uppercase;letter-spacing:.08em;font-size:.78rem}.d66-ai-summary dd{margin:0 0 .8rem}.d66-ai-preview{margin-top:1rem;border:1px solid rgba(255,255,255,.12);border-radius:8px;min-height:120px;display:grid;place-items:center;background:rgba(0,0,0,.28);overflow:hidden}.d66-ai-preview img{max-width:140px;height:auto;display:block;border-radius:6px}.d66-ai-preview-placeholder{color:var(--d66-ai-muted);text-align:center;padding:1rem}.d66-ai-prompt{padding:.75rem;color:var(--d66-ai-muted);font-size:.72rem;line-height:1.35;word-break:break-word}.d66-ai-mockup{display:none;position:relative;margin:0 auto 1rem}.d66-ai-mockup.is-active{display:block}.d66-ai-mockup-mug{width:min(320px,100%);height:300px}.d66-ai-mug-body{position:absolute;left:28px;top:26px;width:214px;height:250px;border-radius:18px 18px 34px 34px;background:linear-gradient(90deg,#e8e0d2 0%,#fff 22%,#d2c7b8 65%,#8f8478 100%);box-shadow:inset -34px 0 38px rgba(0,0,0,.24),inset 18px 0 28px rgba(255,255,255,.74),0 24px 55px rgba(0,0,0,.48);overflow:hidden}.d66-ai-mug-body:before{content:"";position:absolute;left:0;right:0;top:0;height:24px;border-radius:50%;background:rgba(0,0,0,.20)}.d66-ai-mug-art{position:absolute;left:42px;top:70px;width:132px;height:112px;background:rgba(32,215,207,.12);background-size:cover;background-position:center;border-radius:8px;box-shadow:0 5px 18px rgba(0,0,0,.22);transform:perspective(320px) rotateY(-8deg)}.d66-ai-mug-handle{position:absolute;right:24px;top:82px;width:78px;height:120px;border:22px solid #d8d0c4;border-left:0;border-radius:0 70px 70px 0;box-shadow:inset -9px 0 14px rgba(0,0,0,.18),8px 18px 35px rgba(0,0,0,.25)}.d66-ai-mockup-plate{width:min(380px,100%);height:205px;border-radius:16px;background:linear-gradient(135deg,#cfc8bb,#fff7e8 42%,#8c8377);box-shadow:inset 0 0 0 8px rgba(0,0,0,.16),inset 0 0 0 10px rgba(255,255,255,.35),0 24px 58px rgba(0,0,0,.48);overflow:hidden}.d66-ai-plate-art{position:absolute;inset:18px;border-radius:10px;background:linear-gradient(135deg,#202020,#8b3f18);background-size:cover;background-position:center;box-shadow:inset 0 0 18px rgba(0,0,0,.35)}.d66-ai-plate-screw{position:absolute;z-index:3;width:15px;height:15px;border-radius:50%;background:#6c665f;box-shadow:inset 2px 2px 4px rgba(255,255,255,.35),inset -2px -2px 4px rgba(0,0,0,.45)}.d66-ai-plate-screw-a{left:20px;top:20px}.d66-ai-plate-screw-b{right:20px;top:20px}@media(max-width:900px){.d66-ai-shell{grid-template-columns:1fr}.d66-ai-form{grid-template-columns:1fr}}
.d66-ai-variants-wrap{margin-top:1.1rem;border-top:1px solid rgba(255,255,255,.12);padding-top:1rem}
.d66-ai-variants{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:.55rem;margin-bottom:.9rem}
.d66-ai-variant{border:1px solid rgba(255,255,255,.14);border-radius:8px;background:rgba(0,0,0,.28);padding:.4rem;cursor:pointer;position:relative;overflow:hidden}
.d66-ai-variant.is-active{border-color:var(--d66-ai-accent);box-shadow:0 0 0 1px rgba(32,215,207,.45)}
.d66-ai-variant img{width:100%;aspect-ratio:1/1;object-fit:cover;border-radius:6px;display:block}
.d66-ai-variant span{display:block;margin-top:.35rem;color:var(--d66-ai-muted);font-size:.72rem;text-align:center}
.d66-ai-variant-empty{grid-column:1/-1;color:var(--d66-ai-muted);font-size:.88rem;padding:.75rem;border:1px dashed rgba(255,255,255,.16);border-radius:8px;text-align:center}
.d66-ai-variation-box{display:grid;gap:.45rem}
.d66-ai-variation-box label{color:var(--d66-ai-accent);font-weight:900;text-transform:uppercase;letter-spacing:.08em;font-size:.78rem}
.d66-ai-variation-box textarea{width:100%;resize:vertical;border-radius:5px;border:1px solid var(--d66-ai-line);background:rgba(0,0,0,.42);color:var(--d66-ai-text);padding:.75rem}
.d66-ai-variation-box button{border:1px solid transparent;background:linear-gradient(180deg,var(--d66-ai-accent),#0aaeb0);color:#031313;border-radius:5px;padding:.72rem 1rem;font-weight:900;cursor:pointer}
.d66-ai-variation-box button:disabled{opacity:.45;cursor:not-allowed}


/* Druck66 AI Configurator 0.4.1 — Desktop breiter + realistischere Rohling-Vorlagen */

/* Auf Desktop nicht mehr so schmal: nutzt die verfügbare Bühne viel besser */
@media (min-width: 1100px){
  .d66-ai-shell{
    width:min(1540px, calc(100vw - 72px));
    max-width:none;
    margin-left:auto;
    margin-right:auto;
    grid-template-columns:minmax(640px,1.18fr) minmax(520px,.82fr);
    gap:1.65rem;
  }

  .d66-ai-card,
  .d66-ai-summary{
    padding:1.55rem;
  }

  .d66-ai-chat{
    min-height:340px;
  }
}

/* sehr breite Monitore: noch etwas mehr Raum für die Vorschau */
@media (min-width: 1500px){
  .d66-ai-shell{
    width:min(1680px, calc(100vw - 96px));
    grid-template-columns:minmax(760px,1.15fr) minmax(600px,.85fr);
  }
}

/* Gemeinsame Rohling-Bühne */
.d66-ai-summary{
  overflow:hidden;
}

.d66-ai-mockup{
  filter:drop-shadow(0 28px 45px rgba(0,0,0,.42));
}

/* Tasse: weniger Icon, mehr echter Becher-Rohling mit Licht, Rundung und Druckfläche */
.d66-ai-mockup-mug{
  width:min(460px,100%);
  height:390px;
  margin-top:.4rem;
}

.d66-ai-mug-body{
  left:56px;
  top:28px;
  width:270px;
  height:330px;
  border-radius:34px 34px 58px 58px / 24px 24px 48px 48px;
  background:
    radial-gradient(ellipse at 50% 4%, rgba(255,255,255,.95) 0%, rgba(255,255,255,.55) 28%, rgba(0,0,0,.16) 66%, rgba(0,0,0,.28) 100%),
    linear-gradient(90deg,#c8beb0 0%,#fffaf0 16%,#f6efe4 36%,#d1c5b6 72%,#7d7469 100%);
  box-shadow:
    inset -46px 0 50px rgba(0,0,0,.28),
    inset 28px 0 42px rgba(255,255,255,.80),
    inset 0 -30px 38px rgba(0,0,0,.18),
    0 30px 68px rgba(0,0,0,.54);
}

.d66-ai-mug-body:before{
  left:10px;
  right:10px;
  top:0;
  height:34px;
  border-radius:50%;
  background:
    radial-gradient(ellipse at center, rgba(0,0,0,.28) 0%, rgba(0,0,0,.18) 42%, rgba(255,255,255,.65) 62%, rgba(255,255,255,.15) 100%);
}

.d66-ai-mug-body:after{
  content:"";
  position:absolute;
  left:30px;
  top:30px;
  width:46px;
  height:260px;
  border-radius:50%;
  background:linear-gradient(90deg,rgba(255,255,255,.42),rgba(255,255,255,0));
  pointer-events:none;
  z-index:3;
}

/* Druckfläche als Wrap-Fläche, perspektivisch leicht gebogen */
.d66-ai-mug-art{
  left:47px;
  top:86px;
  width:172px;
  height:150px;
  border-radius:12px;
  background-size:cover;
  background-position:center;
  transform:perspective(520px) rotateY(-10deg) rotateZ(-.5deg);
  box-shadow:
    inset 22px 0 24px rgba(255,255,255,.15),
    inset -22px 0 28px rgba(0,0,0,.24),
    0 9px 22px rgba(0,0,0,.28);
  mix-blend-mode:multiply;
  opacity:.96;
}

.d66-ai-mug-handle{
  right:44px;
  top:108px;
  width:118px;
  height:154px;
  border-width:30px;
  border-color:#d7ccbd;
  border-radius:0 92px 92px 0;
  box-shadow:
    inset -11px 0 18px rgba(0,0,0,.20),
    inset 7px 0 12px rgba(255,255,255,.55),
    12px 22px 42px rgba(0,0,0,.30);
}

/* US-Kennzeichen: echtes 302x151 Verhältnis = 2.006:1 */
.d66-ai-mockup-plate{
  width:min(620px,100%);
  aspect-ratio:302 / 151;
  height:auto;
  border-radius:20px;
  background:
    linear-gradient(135deg,#8d8478 0%,#f7efe2 16%,#d9cfc0 52%,#746b61 100%);
  box-shadow:
    inset 0 0 0 9px rgba(0,0,0,.16),
    inset 0 0 0 12px rgba(255,255,255,.36),
    inset 0 0 34px rgba(0,0,0,.30),
    0 30px 70px rgba(0,0,0,.55);
}

/* leicht geprägter Rand */
.d66-ai-mockup-plate:before{
  content:"";
  position:absolute;
  inset:14px;
  border-radius:14px;
  border:2px solid rgba(255,255,255,.55);
  box-shadow:
    inset 0 0 0 2px rgba(0,0,0,.12),
    0 0 0 1px rgba(0,0,0,.14);
  pointer-events:none;
  z-index:4;
}

/* Druckfläche mit exaktem Seitenverhältnis innen */
.d66-ai-plate-art{
  inset:24px;
  border-radius:11px;
  background-size:cover;
  background-position:center;
  box-shadow:
    inset 0 0 20px rgba(0,0,0,.30),
    inset 0 0 0 1px rgba(255,255,255,.22);
}

/* Schrauben an realistischeren Positionen */
.d66-ai-plate-screw{
  width:18px;
  height:18px;
  z-index:5;
  background:
    radial-gradient(circle at 35% 30%,#f5efe4 0%,#92887c 38%,#4e4943 100%);
}

.d66-ai-plate-screw:after{
  content:"";
  position:absolute;
  left:4px;
  right:4px;
  top:8px;
  height:2px;
  background:rgba(0,0,0,.45);
  transform:rotate(-18deg);
}

.d66-ai-plate-screw-a{left:26px;top:24px}
.d66-ai-plate-screw-b{right:26px;top:24px}

/* Kleine generierte Original-Vorschau bleibt, aber die Produktvorschau ist jetzt Hauptdarsteller */
.d66-ai-preview{
  min-height:92px;
  opacity:.92;
}

.d66-ai-preview img{
  max-width:92px;
}

/* Mobil nicht zu groß werden */
@media (max-width: 760px){
  .d66-ai-mockup-mug{
    width:min(330px,100%);
    height:310px;
  }
  .d66-ai-mug-body{
    left:34px;
    width:220px;
    height:265px;
  }
  .d66-ai-mug-art{
    left:40px;
    top:76px;
    width:140px;
    height:118px;
  }
  .d66-ai-mug-handle{
    right:20px;
    top:94px;
    width:88px;
    height:118px;
    border-width:23px;
  }
}


/* Druck66 AI Configurator 0.4.2 — Desktop wieder sauber mittig statt rechtslastig */
@media (min-width: 1100px){
  .d66-ai-shell{
    width:min(1280px, calc(100vw - 96px)) !important;
    max-width:1280px !important;
    margin-left:auto !important;
    margin-right:auto !important;
    grid-template-columns:minmax(0, 1.12fr) minmax(360px, .88fr) !important;
    gap:1.35rem !important;
    transform:none !important;
  }

  .d66-ai-card,
  .d66-ai-summary{
    padding:1.35rem !important;
  }

  .d66-ai-chat{
    min-height:300px !important;
  }
}

@media (min-width: 1500px){
  .d66-ai-shell{
    width:min(1360px, calc(100vw - 140px)) !important;
    max-width:1360px !important;
    grid-template-columns:minmax(0, 1.15fr) minmax(390px, .85fr) !important;
  }
}

/* Vorschau bleibt groß genug, aber nicht mehr nach rechts gedrückt */
@media (min-width: 1100px){
  .d66-ai-mockup-mug{
    width:min(390px, 100%) !important;
    height:340px !important;
  }

  .d66-ai-mug-body{
    left:42px !important;
    top:26px !important;
    width:238px !important;
    height:286px !important;
  }

  .d66-ai-mug-art{
    left:42px !important;
    top:78px !important;
    width:150px !important;
    height:128px !important;
  }

  .d66-ai-mug-handle{
    right:34px !important;
    top:96px !important;
    width:96px !important;
    height:132px !important;
    border-width:26px !important;
  }

  .d66-ai-mockup-plate{
    width:min(500px,100%) !important;
  }
}

/* In Theme-Sektionen mit enger Box trotzdem zentriert bleiben */
.d66-newsletter-box .d66-ai-shell,
.entry-content .d66-ai-shell,
.wp-block-shortcode .d66-ai-shell{
  margin-left:auto !important;
  margin-right:auto !important;
}


/* Druck66 AI Configurator 0.4.3 — Konfigurator-Gruppe auf Desktop weiter nach links */
@media (min-width: 1100px){
  .d66-ai-shell{
    margin-left:auto !important;
    margin-right:auto !important;
    transform:translateX(-150px) !important;
  }
}

@media (min-width: 1500px){
  .d66-ai-shell{
    transform:translateX(-190px) !important;
  }
}

@media (min-width: 1800px){
  .d66-ai-shell{
    transform:translateX(-230px) !important;
  }
}

/* Bei kleineren Desktop-Breiten nicht übertreiben */
@media (min-width: 1100px) and (max-width: 1300px){
  .d66-ai-shell{
    transform:translateX(-90px) !important;
  }
}

/* Tablet/Mobil bleibt ohne Verschiebung */
@media (max-width: 1099px){
  .d66-ai-shell{
    transform:none !important;
  }
}


/* Druck66 AI Configurator 0.4.4 — echtes glattes US-Kennzeichen ohne Randprägung
   Basis: 302 x 151 mm, glatter Druck, Rand nur grafisch simuliert. */
.d66-ai-mockup-plate{
  width:min(620px,100%) !important;
  aspect-ratio:302 / 151 !important;
  height:auto !important;
  border-radius:20px !important;
  background:
    linear-gradient(135deg,#f8f8f5 0%,#ffffff 38%,#e9e9e5 72%,#d7d7d2 100%) !important;
  box-shadow:
    0 26px 64px rgba(0,0,0,.52),
    inset 0 0 0 1px rgba(255,255,255,.72),
    inset 0 0 30px rgba(0,0,0,.10) !important;
  overflow:hidden !important;
}

/* alte Präge-/Schraubenoptik deaktivieren */
.d66-ai-mockup-plate:before,
.d66-ai-plate-screw{
  display:none !important;
}

/* Motiv liegt auf der glatten Druckfläche.
   Sicherheitsabstand außen, damit nichts direkt an den Rand oder in die Langlöcher läuft. */
.d66-ai-plate-art{
  position:absolute !important;
  inset:22px 30px !important;
  border-radius:14px !important;
  background-size:cover !important;
  background-position:center !important;
  box-shadow:
    inset 0 0 0 1px rgba(255,255,255,.20),
    inset 0 0 22px rgba(0,0,0,.22) !important;
  z-index:1 !important;
}

/* gedruckter Rand statt echter Randprägung */
.d66-ai-plate-print-border{
  position:absolute;
  inset:16px;
  border-radius:16px;
  border:3px solid rgba(0,0,0,.28);
  box-shadow:
    inset 0 0 0 2px rgba(255,255,255,.24),
    inset 0 0 22px rgba(0,0,0,.16);
  pointer-events:none;
  z-index:3;
}

/* Montage-Langlöcher wie auf Renés Rohling – bleiben frei und liegen über dem Motiv */
.d66-ai-plate-slot{
  position:absolute;
  width:52px;
  height:16px;
  border-radius:7px;
  background:#050505;
  box-shadow:
    inset 0 2px 3px rgba(255,255,255,.10),
    0 1px 2px rgba(255,255,255,.45);
  z-index:5;
  pointer-events:none;
}

.d66-ai-plate-slot-tl{left:19%;top:17%}
.d66-ai-plate-slot-tr{right:19%;top:17%}
.d66-ai-plate-slot-bl{left:19%;bottom:16%}
.d66-ai-plate-slot-br{right:19%;bottom:16%}

/* leichtes Produktfoto-Finish über dem kompletten Schild, ohne 3D */
.d66-ai-mockup-plate:after{
  content:"";
  position:absolute;
  inset:0;
  border-radius:20px;
  background:
    linear-gradient(110deg,rgba(255,255,255,.28) 0%,rgba(255,255,255,.06) 24%,rgba(0,0,0,0) 52%,rgba(0,0,0,.16) 100%),
    radial-gradient(circle at 18% 10%,rgba(255,255,255,.30),transparent 28%),
    radial-gradient(circle at 90% 85%,rgba(0,0,0,.16),transparent 34%);
  pointer-events:none;
  z-index:4;
}

/* Mobile: Langlöcher proportional etwas kleiner */
@media (max-width:760px){
  .d66-ai-plate-slot{
    width:38px;
    height:12px;
    border-radius:6px;
  }
  .d66-ai-plate-art{
    inset:18px 22px !important;
  }
}


/* Druck66 AI Configurator 0.4.5 — Kennzeichen bleibt weiß wie der echte Rohling */
.d66-ai-mockup-plate{
  background:#f7f7f4 !important;
  border-radius:18px !important;
  box-shadow:
    0 24px 58px rgba(0,0,0,.48),
    inset 0 0 0 1px rgba(255,255,255,.85),
    inset 0 0 18px rgba(0,0,0,.06) !important;
}

/* Kein dunkler simulierter Rahmen als Standard – Rohling bleibt weiß.
   Der spätere Rand soll aus dem generierten Druckmotiv kommen, nicht aus dem Rohling. */
.d66-ai-plate-print-border{
  border:0 !important;
  box-shadow:none !important;
}

/* Motiv auf voller weißer Platte, aber mit sauberem Sicherheitsabstand */
.d66-ai-plate-art{
  inset:18px 24px !important;
  border-radius:10px !important;
  background-color:transparent !important;
  background-size:contain !important;
  background-repeat:no-repeat !important;
  background-position:center !important;
  box-shadow:none !important;
  z-index:1 !important;
}

/* dezentes echtes Foto-Finish, aber ohne Metallgrau/Schmutz */
.d66-ai-mockup-plate:after{
  background:
    linear-gradient(110deg,rgba(255,255,255,.20) 0%,rgba(255,255,255,.06) 28%,rgba(0,0,0,0) 62%,rgba(0,0,0,.045) 100%) !important;
  z-index:4 !important;
}

/* Langlöcher bleiben wie beim weißen Rohling schwarz */
.d66-ai-plate-slot{
  background:#050505 !important;
  box-shadow:none !important;
  z-index:5 !important;
}


/* Druck66 AI Configurator 0.4.6 — Schild weiß, Hintergrund dunkel */
.d66-ai-summary{
  background:
    linear-gradient(180deg,rgba(18,18,18,.96),rgba(10,10,10,.96)) !important;
  overflow:hidden !important;
}

/* Dunkle Bühne hinter dem weißen Schild */
.d66-ai-mockup-plate{
  background:#f7f7f4 !important;
  position:relative !important;
  z-index:2 !important;
}

/* Zusätzliche dunkle Bühne um das Schild herum */
.d66-ai-mockup-plate-wrap,
.d66-ai-mockup-plate{
  isolation:isolate;
}

.d66-ai-mockup-plate::before{
  content:"" !important;
  position:absolute !important;
  inset:-55px !important;
  background:
    radial-gradient(circle at center, rgba(38,38,38,.65) 0%, rgba(12,12,12,.95) 68%) !important;
  z-index:-1 !important;
  border-radius:40px !important;
  filter:blur(12px) !important;
  display:block !important;
}

/* Schild selbst bleibt sauber weiß */
.d66-ai-plate-art{
  z-index:2 !important;
}

/* Weiße Lichtkante für echten Rohling-Look */
.d66-ai-mockup-plate::after{
  content:"" !important;
  position:absolute !important;
  inset:0 !important;
  border-radius:18px !important;
  background:
    linear-gradient(120deg,
      rgba(255,255,255,.24) 0%,
      rgba(255,255,255,.08) 24%,
      rgba(255,255,255,0) 48%,
      rgba(0,0,0,.05) 100%) !important;
  pointer-events:none !important;
  z-index:4 !important;
}


/* Druck66 AI Configurator 0.4.7 — Schild wirklich weiß */
.d66-ai-mockup-plate{
  background:#ffffff !important;
  background-image:none !important;
  border:1px solid rgba(255,255,255,.85) !important;
  box-shadow:
    0 28px 70px rgba(0,0,0,.58),
    0 0 0 1px rgba(255,255,255,.95),
    inset 0 0 0 1px rgba(0,0,0,.04),
    inset 0 -8px 18px rgba(0,0,0,.035) !important;
}

/* Alle alten grauen/metallic Verläufe hart überschreiben */
.d66-ai-mockup-plate,
.d66-ai-mockup-plate:before,
.d66-ai-mockup-plate:after{
  background-color:#ffffff !important;
}

/* Dunkler Hintergrund bleibt außen */
.d66-ai-summary{
  background:
    linear-gradient(180deg, rgba(16,16,16,.97), rgba(8,8,8,.98)) !important;
}

/* Druckmotiv nicht abdunkeln */
.d66-ai-plate-art{
  mix-blend-mode:normal !important;
  opacity:1 !important;
  filter:none !important;
}

/* Weiße Platte mit leichter Lichtkante */
.d66-ai-mockup-plate:after{
  content:"" !important;
  position:absolute !important;
  inset:0 !important;
  border-radius:18px !important;
  background:
    linear-gradient(
      115deg,
      rgba(255,255,255,.18) 0%,
      rgba(255,255,255,.06) 20%,
      rgba(255,255,255,0) 45%,
      rgba(0,0,0,.035) 100%
    ) !important;
  pointer-events:none !important;
  z-index:4 !important;
}


/* Druck66 AI Configurator 0.4.8 — Weißes Schild wie Vorlage, dunkle Bühne, kein braunes Platzhalterfeld */
.d66-ai-summary{
  background:
    radial-gradient(circle at 50% 34%, rgba(42,42,42,.42), rgba(8,8,8,.98) 68%),
    linear-gradient(180deg, rgba(18,18,18,.98), rgba(6,6,6,.98)) !important;
}

/* Der Rohling selbst ist wirklich weiß */
.d66-ai-mockup-plate{
  background:#ffffff !important;
  background-image:none !important;
  border:1px solid rgba(255,255,255,.92) !important;
  border-radius:18px !important;
  position:relative !important;
  isolation:isolate !important;
  box-shadow:
    0 30px 72px rgba(0,0,0,.62),
    0 0 0 1px rgba(255,255,255,.92),
    inset 0 0 0 1px rgba(0,0,0,.035),
    inset 0 -10px 20px rgba(0,0,0,.035) !important;
}

/* Dunkle Bühne AUSSEN hinter dem weißen Schild */
.d66-ai-mockup-plate:before{
  content:"" !important;
  display:block !important;
  position:absolute !important;
  inset:-58px !important;
  border-radius:42px !important;
  background:
    radial-gradient(circle at center, rgba(50,50,50,.65), rgba(8,8,8,.96) 70%) !important;
  filter:blur(10px) !important;
  z-index:-1 !important;
  pointer-events:none !important;
}

/* Nur ein dezenter Lichtfilm AUF dem weißen Rohling */
.d66-ai-mockup-plate:after{
  content:"" !important;
  display:block !important;
  position:absolute !important;
  inset:0 !important;
  border-radius:18px !important;
  background:
    linear-gradient(115deg,
      rgba(255,255,255,.22) 0%,
      rgba(255,255,255,.08) 22%,
      rgba(255,255,255,0) 52%,
      rgba(0,0,0,.035) 100%) !important;
  pointer-events:none !important;
  z-index:4 !important;
}

/* Ohne generiertes Motiv darf hier kein braunes/graues Platzhalterbild liegen */
.d66-ai-plate-art{
  background-color:transparent !important;
  background-image:none;
  box-shadow:none !important;
  border:0 !important;
  opacity:1 !important;
  mix-blend-mode:normal !important;
  filter:none !important;
  z-index:2 !important;
}

/* Sobald per JS ein Motiv gesetzt wird, darf das Inline-background-image sichtbar werden */
.d66-ai-plate-art[style*="background-image"]{
  background-size:contain !important;
  background-repeat:no-repeat !important;
  background-position:center !important;
}

/* Löcher bleiben schwarz wie beim echten Rohling */
.d66-ai-plate-slot{
  background:#000 !important;
  box-shadow:0 1px 2px rgba(255,255,255,.18) !important;
  z-index:5 !important;
}


/* Druck66 AI Configurator 0.4.9 — HARDFIX: Schild weiß, Hintergrund dunkel */
.d66-ai-summary{
  background:#080909 !important;
}

/* Die dunkle Bühne kommt NICHT mehr über ::before vom Schild,
   weil das mobil den Rohling grau überlagert hat. */
.d66-ai-mockup-plate::before{
  content:none !important;
  display:none !important;
  background:none !important;
}

/* Weißer Rohling, hart überschrieben */
.d66-ai-mockup-plate{
  background:#ffffff !important;
  background-color:#ffffff !important;
  background-image:none !important;
  border:1px solid rgba(255,255,255,.96) !important;
  box-shadow:
    0 28px 70px rgba(0,0,0,.62),
    0 0 0 1px rgba(255,255,255,.85),
    inset 0 0 0 1px rgba(0,0,0,.035) !important;
}

/* Nur minimale Lichtkante, kein Grau-Schleier */
.d66-ai-mockup-plate::after{
  content:"" !important;
  display:block !important;
  position:absolute !important;
  inset:0 !important;
  border-radius:18px !important;
  background:
    linear-gradient(115deg,
      rgba(255,255,255,.16) 0%,
      rgba(255,255,255,.05) 24%,
      rgba(255,255,255,0) 55%,
      rgba(0,0,0,.018) 100%) !important;
  z-index:4 !important;
  pointer-events:none !important;
}

/* Leere Motivfläche darf den weißen Rohling nicht einfärben */
.d66-ai-plate-art{
  background:transparent !important;
  background-color:transparent !important;
  box-shadow:none !important;
  border:0 !important;
  opacity:1 !important;
  filter:none !important;
  mix-blend-mode:normal !important;
}

/* Wenn ein Motiv per Inline-Style gesetzt wurde, wird es trotzdem angezeigt */
.d66-ai-plate-art[style*="background-image"]{
  background-size:contain !important;
  background-repeat:no-repeat !important;
  background-position:center !important;
}

/* Dunkle Bühne außen über den Container, nicht über dem Schild */
.d66-ai-summary:has(.d66-ai-mockup-plate.is-active),
.d66-ai-summary{
  background:
    radial-gradient(circle at 50% 38%, rgba(45,45,45,.46), rgba(8,8,8,.98) 62%),
    #080909 !important;
}


/* Druck66 AI Configurator 0.5.0 — Langlöcher nach Renés echter Vorlage positioniert */

/* Schild bleibt weiß, Bühne bleibt dunkel */
.d66-ai-mockup-plate{
  background:#fff !important;
  background-image:none !important;
  border-radius:18px !important;
  overflow:hidden !important;
}

/* Motivfläche bleibt leer, solange kein Design generiert wurde */
.d66-ai-plate-art{
  background:transparent !important;
  background-color:transparent !important;
  background-image:none;
}

/* Wenn ein Design per JS kommt, sichtbar anzeigen */
.d66-ai-plate-art[style*="background-image"]{
  background-size:contain !important;
  background-repeat:no-repeat !important;
  background-position:center !important;
}

/* Langlöcher: eher wie auf der Vorlage
   Positionen bezogen auf das weiße Schild:
   links ca. 21%, rechts ca. 78%, oben ca. 11%, unten ca. 83% */
.d66-ai-plate-slot{
  width:52px !important;
  height:15px !important;
  border-radius:6px !important;
  background:#000 !important;
  box-shadow:none !important;
  z-index:6 !important;
}

.d66-ai-plate-slot-tl{
  left:21.2% !important;
  top:10.8% !important;
}

.d66-ai-plate-slot-tr{
  right:21.2% !important;
  top:10.8% !important;
}

.d66-ai-plate-slot-bl{
  left:21.2% !important;
  bottom:10.8% !important;
}

.d66-ai-plate-slot-br{
  right:21.2% !important;
  bottom:10.8% !important;
}

/* Mobile proportional etwas kleiner und gleich positioniert */
@media (max-width:760px){
  .d66-ai-plate-slot{
    width:38px !important;
    height:11px !important;
    border-radius:5px !important;
  }

  .d66-ai-plate-slot-tl{
    left:21.2% !important;
    top:10.8% !important;
  }

  .d66-ai-plate-slot-tr{
    right:21.2% !important;
    top:10.8% !important;
  }

  .d66-ai-plate-slot-bl{
    left:21.2% !important;
    bottom:10.8% !important;
  }

  .d66-ai-plate-slot-br{
    right:21.2% !important;
    bottom:10.8% !important;
  }
}


/* Druck66 AI Configurator 0.5.1 — echte weiße Tasse nach Renés Vorlage */
.d66-ai-mockup-mug{
  width:min(420px,100%) !important;
  height:360px !important;
  position:relative !important;
}

/* echter weißer Becher */
.d66-ai-mug-body{
  left:42px !important;
  top:28px !important;
  width:250px !important;
  height:285px !important;
  border-radius:18px 18px 22px 22px !important;
  background:#ffffff !important;
  background-image:none !important;
  box-shadow:
    0 24px 55px rgba(0,0,0,.38),
    inset -10px 0 18px rgba(0,0,0,.035),
    inset 10px 0 16px rgba(255,255,255,.85),
    inset 0 -8px 16px rgba(0,0,0,.03) !important;
}

/* obere Tassenkante */
.d66-ai-mug-body:before{
  background:
    radial-gradient(circle at center,
      rgba(245,245,245,.95) 0%,
      rgba(228,228,228,.95) 55%,
      rgba(180,180,180,.45) 100%) !important;
  height:26px !important;
}

/* Druckbereich */
.d66-ai-mug-art{
  left:54px !important;
  top:92px !important;
  width:145px !important;
  height:120px !important;
  border-radius:8px !important;
  transform:none !important;
  background-size:cover !important;
  background-position:center !important;
  box-shadow:none !important;
  mix-blend-mode:normal !important;
  opacity:1 !important;
}

/* echter weißer Henkel */
.d66-ai-mug-handle{
  right:36px !important;
  top:92px !important;
  width:92px !important;
  height:136px !important;
  border-width:22px !important;
  border-color:#ffffff !important;
  box-shadow:
    8px 18px 34px rgba(0,0,0,.18),
    inset -5px 0 10px rgba(0,0,0,.05),
    inset 4px 0 8px rgba(255,255,255,.7) !important;
}

/* dunkle Bühne */
.d66-ai-summary{
  background:
    radial-gradient(circle at 50% 35%, rgba(40,40,40,.42), rgba(7,7,7,.98) 68%),
    #080808 !important;
}


/* Druck66 AI Configurator 0.5.2 — echte Tassenform statt Icon */

/* Die komplette Vorschau größer */
.d66-ai-mockup-mug{
  width:min(460px,100%) !important;
  height:380px !important;
  position:relative !important;
}

/* echter runder Tassenkörper */
.d66-ai-mug-body{
  position:absolute !important;
  left:58px !important;
  top:38px !important;
  width:220px !important;
  height:255px !important;
  border-radius:18px 18px 24px 24px !important;
  background:#ffffff !important;
  background-image:none !important;
  box-shadow:
    0 24px 58px rgba(0,0,0,.34),
    inset -12px 0 18px rgba(0,0,0,.04),
    inset 10px 0 14px rgba(255,255,255,.82),
    inset 0 -10px 14px rgba(0,0,0,.025) !important;
}

/* obere Öffnung */
.d66-ai-mug-body::before{
  content:"" !important;
  position:absolute !important;
  left:8px !important;
  right:8px !important;
  top:-10px !important;
  height:22px !important;
  border-radius:50% !important;
  background:
    radial-gradient(circle at center,
      rgba(248,248,248,.98) 0%,
      rgba(232,232,232,.95) 58%,
      rgba(180,180,180,.35) 100%) !important;
}

/* echter Henkel */
.d66-ai-mug-handle{
  position:absolute !important;
  right:86px !important;
  top:92px !important;
  width:92px !important;
  height:126px !important;
  border:18px solid #ffffff !important;
  border-left:16px solid transparent !important;
  border-radius:50px !important;
  background:transparent !important;
  box-shadow:
    8px 16px 28px rgba(0,0,0,.14),
    inset -5px 0 8px rgba(0,0,0,.04),
    inset 4px 0 8px rgba(255,255,255,.7) !important;
}

/* Druckfläche realistischer */
.d66-ai-mug-art{
  position:absolute !important;
  left:86px !important;
  top:112px !important;
  width:120px !important;
  height:105px !important;
  border-radius:6px !important;
  background-size:cover !important;
  background-position:center !important;
  background-repeat:no-repeat !important;
  box-shadow:none !important;
  opacity:1 !important;
}

/* Dunkler neutraler Hintergrund */
.d66-ai-summary{
  background:
    radial-gradient(circle at 50% 35%, rgba(42,42,42,.4), rgba(8,8,8,.98) 68%),
    #080808 !important;
}


/* Druck66 AI Configurator 0.5.3 — komplette Tasse neu aufgebaut */

/* Bühne */
.d66-ai-summary{
  background:
    radial-gradient(circle at 50% 38%, rgba(40,40,40,.38), rgba(7,7,7,.98) 70%),
    #080808 !important;
}

/* Container */
.d66-ai-mockup-mug{
  position:relative !important;
  width:min(420px,100%) !important;
  height:340px !important;
  margin:auto !important;
}

/* echter runder Tassenkörper */
.d66-ai-mug-body{
  position:absolute !important;
  left:70px !important;
  top:40px !important;
  width:185px !important;
  height:220px !important;
  border-radius:14px 14px 18px 18px !important;
  background:
    linear-gradient(90deg,
      #f1f1f1 0%,
      #ffffff 18%,
      #fcfcfc 52%,
      #ececec 100%) !important;
  box-shadow:
    0 20px 46px rgba(0,0,0,.32),
    inset -8px 0 12px rgba(0,0,0,.03),
    inset 8px 0 10px rgba(255,255,255,.8) !important;
  overflow:visible !important;
}

/* obere Öffnung */
.d66-ai-mug-body::before{
  content:"" !important;
  position:absolute !important;
  left:8px !important;
  right:8px !important;
  top:-10px !important;
  height:20px !important;
  border-radius:50% !important;
  background:
    radial-gradient(circle at center,
      #fafafa 0%,
      #ececec 58%,
      #d0d0d0 100%) !important;
  z-index:3 !important;
}

/* echter Henkel */
.d66-ai-mug-handle{
  position:absolute !important;
  left:238px !important;
  top:92px !important;
  width:64px !important;
  height:108px !important;
  border:14px solid #ffffff !important;
  border-left:10px solid transparent !important;
  border-radius:50px !important;
  background:transparent !important;
  box-shadow:
    6px 10px 22px rgba(0,0,0,.18),
    inset -4px 0 8px rgba(0,0,0,.04),
    inset 3px 0 7px rgba(255,255,255,.6) !important;
}

/* Druckfläche */
.d66-ai-mug-art{
  position:absolute !important;
  left:98px !important;
  top:112px !important;
  width:108px !important;
  height:96px !important;
  border-radius:4px !important;
  background-size:cover !important;
  background-repeat:no-repeat !important;
  background-position:center !important;
  opacity:1 !important;
  box-shadow:none !important;
}

/* kein komisches Quadrat */
.d66-ai-mug-art:not([style*="background-image"]){
  background:transparent !important;
}


/* Druck66 AI Configurator 0.5.4 — echte Tasse aus Renés PNG */

/* alte CSS-Tasse deaktivieren */
.d66-ai-mug-body,
.d66-ai-mug-body::before,
.d66-ai-mug-handle{
  display:none !important;
}

/* Vorschaufläche */
.d66-ai-mockup-mug{
  position:relative !important;
  width:min(430px,100%) !important;
  height:360px !important;
  margin:auto !important;
}

/* echte Tasse als Bild */
.d66-ai-mockup-mug::before{
  content:"" !important;
  position:absolute !important;
  inset:0 !important;
  background-image:url('../images/druck66-real-black-mug.png') !important;
  background-repeat:no-repeat !important;
  background-position:center !important;
  background-size:contain !important;
  z-index:1 !important;
}

/* Druckbereich exakt auf der echten Tasse */
.d66-ai-mug-art{
  position:absolute !important;
  left:112px !important;
  top:112px !important;
  width:118px !important;
  height:110px !important;
  border-radius:4px !important;
  background-size:cover !important;
  background-repeat:no-repeat !important;
  background-position:center !important;
  box-shadow:none !important;
  opacity:1 !important;
  z-index:3 !important;
}

/* Leere Fläche ohne Platzhalterfarbe */
.d66-ai-mug-art:not([style*="background-image"]){
  background:transparent !important;
}

/* dunkle Bühne */
.d66-ai-summary{
  background:
    radial-gradient(circle at 50% 38%, rgba(42,42,42,.38), rgba(8,8,8,.98) 70%),
    #080808 !important;
}


/* Druck66 AI Configurator 0.5.5 — echtes Produkt-Mapping */

/* =========================
   TASSE: Motiv auf echte Tasse
   ========================= */

/* Die echte Tasse bleibt der Rohling im Hintergrund */
.d66-ai-mockup-mug{
  width:min(460px,100%) !important;
  height:380px !important;
}

/* Druckbild auf der Rundung:
   leicht gewölbt, maskiert, mit Keramik-Lichtkante */
.d66-ai-mug-art{
  left:126px !important;
  top:124px !important;
  width:122px !important;
  height:112px !important;
  border-radius:8px !important;
  background-size:cover !important;
  background-repeat:no-repeat !important;
  background-position:center !important;
  transform:
    perspective(560px)
    rotateY(-7deg)
    skewY(.4deg) !important;
  transform-origin:center center !important;
  overflow:hidden !important;
  z-index:3 !important;
  opacity:1 !important;
  mix-blend-mode:multiply !important;
  filter:contrast(1.04) saturate(.98) !important;
}

/* ohne Design keine bläuliche Fläche */
.d66-ai-mug-art:not([style*="background-image"]){
  background:transparent !important;
  mix-blend-mode:normal !important;
}

/* Lichtfilm über dem gedruckten Motiv, damit es nicht wie ein Aufkleber aussieht */
.d66-ai-mug-art::after{
  content:"";
  position:absolute;
  inset:0;
  border-radius:8px;
  background:
    linear-gradient(90deg,
      rgba(255,255,255,.24) 0%,
      rgba(255,255,255,.08) 24%,
      rgba(255,255,255,0) 56%,
      rgba(0,0,0,.10) 100%);
  pointer-events:none;
  display:block;
}

/* Design etwas auf der Tasse verstecken, solange nichts generiert wurde */
.d66-ai-shell:not(.has-generated-design) .d66-ai-mug-art::after{
  display:none;
}

/* =========================
   US-KENNZEICHEN: exaktes Mapping
   ========================= */

/* Weißer Rohling bleibt Hintergrund */
.d66-ai-mockup-plate{
  background:#fff !important;
  background-image:none !important;
}

/* Druckbereich: fast komplette Fläche, aber mit Sicherheitsabstand.
   Wichtig: Motiv wird auf 302x151-Look eingepasst. */
.d66-ai-plate-art{
  inset:20px 28px !important;
  border-radius:10px !important;
  background-size:cover !important;
  background-repeat:no-repeat !important;
  background-position:center !important;
  z-index:2 !important;
  overflow:hidden !important;
}

/* ohne Design bleibt Schild wirklich leer/weiß */
.d66-ai-plate-art:not([style*="background-image"]){
  background:transparent !important;
}

/* Die Löcher liegen oben über dem Druckbild und schneiden optisch aus */
.d66-ai-plate-slot{
  z-index:8 !important;
}

/* Sicherheitszonen visualisieren wir nur sehr dezent, sobald kein Design da ist */
.d66-ai-shell:not(.has-generated-design) .d66-ai-plate-art{
  outline:1px dashed rgba(0,0,0,.05) !important;
}

/* Sobald Design da ist, keine Hilfslinie */
.d66-ai-shell.has-generated-design .d66-ai-plate-art{
  outline:0 !important;
}

/* kleines Produktfoto-Finish über allem, ohne das Weiß grau zu machen */
.d66-ai-mockup-plate::after{
  background:
    linear-gradient(115deg,
      rgba(255,255,255,.14) 0%,
      rgba(255,255,255,.045) 22%,
      rgba(255,255,255,0) 55%,
      rgba(0,0,0,.012) 100%) !important;
}

/* Varianten-Vorschau größer brauchbar */
.d66-ai-variants{
  grid-template-columns:repeat(3,minmax(0,1fr)) !important;
}

.d66-ai-variant img{
  object-fit:cover !important;
}

/* Mobile etwas besser skalieren */
@media (max-width:760px){
  .d66-ai-mockup-mug{
    height:320px !important;
  }

  .d66-ai-mug-art{
    left:50% !important;
    top:104px !important;
    width:104px !important;
    height:96px !important;
    margin-left:-66px !important;
  }

  .d66-ai-plate-art{
    inset:18px 22px !important;
  }
}


/* Druck66 AI Configurator 0.5.6 — Fix: Motiv wirklich auf die Tasse legen
   Grund: .d66-ai-mug-art liegt im HTML innerhalb von .d66-ai-mug-body.
   Der Body darf also NICHT display:none sein, sonst verschwindet das Motiv. */

/* echte PNG-Tasse bleibt als Rohling */
.d66-ai-mockup-mug{
  position:relative !important;
  width:min(460px,100%) !important;
  height:380px !important;
  margin:auto !important;
}

.d66-ai-mockup-mug::before{
  content:"" !important;
  position:absolute !important;
  inset:0 !important;
  background-image:url('../images/druck66-real-black-mug.png') !important;
  background-repeat:no-repeat !important;
  background-position:center !important;
  background-size:contain !important;
  z-index:1 !important;
  pointer-events:none !important;
}

/* Body nur noch als unsichtbarer Träger für das Motiv */
.d66-ai-mug-body{
  display:block !important;
  position:static !important;
  width:0 !important;
  height:0 !important;
  background:transparent !important;
  background-image:none !important;
  box-shadow:none !important;
  border:0 !important;
  overflow:visible !important;
}

.d66-ai-mug-body::before,
.d66-ai-mug-body::after,
.d66-ai-mug-handle{
  display:none !important;
  content:none !important;
}

/* Motivfläche liegt jetzt relativ zur gesamten Tassen-Vorschau */
.d66-ai-mug-art{
  position:absolute !important;
  left:132px !important;
  top:126px !important;
  width:122px !important;
  height:112px !important;
  border-radius:7px !important;
  background-size:cover !important;
  background-repeat:no-repeat !important;
  background-position:center !important;
  transform:perspective(520px) rotateY(-6deg) skewY(.35deg) !important;
  transform-origin:center center !important;
  z-index:3 !important;
  opacity:1 !important;
  mix-blend-mode:multiply !important;
  filter:contrast(1.04) saturate(.98) !important;
  box-shadow:none !important;
}

/* kein sichtbarer Platzhalter vor der Bildgenerierung */
.d66-ai-mug-art:not([style*="background-image"]){
  background:transparent !important;
  mix-blend-mode:normal !important;
  filter:none !important;
}

/* Keramik-Lichtfilm über dem Motiv */
.d66-ai-mug-art::after{
  content:"";
  position:absolute;
  inset:0;
  border-radius:7px;
  background:
    linear-gradient(90deg,
      rgba(255,255,255,.20) 0%,
      rgba(255,255,255,.06) 24%,
      rgba(255,255,255,0) 56%,
      rgba(0,0,0,.08) 100%);
  pointer-events:none;
}

/* Mobile-Position korrigiert */
@media (max-width:760px){
  .d66-ai-mockup-mug{
    width:min(390px,100%) !important;
    height:330px !important;
  }

  .d66-ai-mug-art{
    left:50% !important;
    top:108px !important;
    width:105px !important;
    height:96px !important;
    margin-left:-68px !important;
  }
}


/* Druck66 AI Configurator 0.5.8 — bessere Motiv-Treue und saubere Anzeige */
.d66-ai-prompt{
  text-align:left !important;
  font-size:.72rem !important;
  opacity:.72 !important;
  max-height:110px !important;
  overflow:auto !important;
}

.d66-ai-preview{
  margin-top:.85rem !important;
}

/* Produktbild bleibt Hauptdarsteller */
.d66-ai-mockup-mug,
.d66-ai-mockup-plate{
  margin-bottom:.75rem !important;
}


/* Druck66 AI Configurator 0.5.9 — echte Druckflächen-Maße
   Tasse: 205 x 95 mm = breiter Wrap
   US-Kennzeichen: 302 x 151 mm */

/* Tassenmotiv nicht mehr quadratisch, sondern als breiter Wickeldruck-Ausschnitt */
.d66-ai-mug-art{
  left:104px !important;
  top:124px !important;
  width:160px !important;
  height:74px !important;
  border-radius:6px !important;
  background-size:cover !important;
  background-position:center !important;
}

/* Kennzeichen-Designfläche entspricht 305x155 und bleibt breit */
.d66-ai-plate-art{
  inset:20px 26px !important;
  background-size:cover !important;
  background-position:center !important;
}

/* Originalvorschau soll nicht quadratisch erzwingen */
.d66-ai-preview img{
  max-width:180px !important;
  width:auto !important;
  height:auto !important;
  object-fit:contain !important;
}

/* Varianten zeigen das Seitenverhältnis besser, nicht alles als Quadrat */
.d66-ai-variant img{
  aspect-ratio:205 / 95 !important;
  object-fit:cover !important;
}

.d66-ai-mockup-plate + .d66-ai-preview img,
.d66-ai-mockup-plate ~ .d66-ai-preview img{
  aspect-ratio:302 / 151 !important;
}


/* Druck66 AI Configurator 0.6.0 — Vorschau-Fix: breiter Tassen-Wrap auf Produkt */
.d66-ai-mockup-mug .d66-ai-mug-body,
.d66-ai-mockup-mug .d66-ai-mug-body::before,
.d66-ai-mockup-mug .d66-ai-mug-body::after,
.d66-ai-mockup-mug .d66-ai-mug-handle{display:none!important}

.d66-ai-mockup-mug{
  position:relative!important;
  width:min(470px,100%)!important;
  height:385px!important;
  margin:auto!important;
  overflow:visible!important;
}
.d66-ai-mockup-mug::before{
  content:""!important;
  position:absolute!important;
  inset:0!important;
  background-image:url('../images/druck66-real-black-mug.png')!important;
  background-repeat:no-repeat!important;
  background-position:center!important;
  background-size:contain!important;
  z-index:4!important;
  pointer-events:none!important;
}
.d66-ai-mockup-mug .d66-ai-mug-art{
  position:absolute!important;
  display:block!important;
  background-repeat:no-repeat!important;
  background-size:cover!important;
  opacity:1!important;
  z-index:3!important;
  box-shadow:none!important;
  filter:contrast(1.04) saturate(.98)!important;
  mix-blend-mode:multiply!important;
  pointer-events:none!important;
}
.d66-ai-mug-art-front{
  left:128px!important;
  top:132px!important;
  width:130px!important;
  height:61px!important;
  border-radius:5px!important;
  transform:perspective(520px) rotateY(-5deg) skewY(.25deg)!important;
  background-position:center center!important;
}
.d66-ai-mug-art-left{
  left:88px!important;
  top:136px!important;
  width:56px!important;
  height:55px!important;
  border-radius:8px 2px 2px 8px!important;
  transform:perspective(460px) rotateY(42deg) skewY(-1deg)!important;
  transform-origin:right center!important;
  background-position:left center!important;
  opacity:.72!important;
}
.d66-ai-mug-art-right{
  left:243px!important;
  top:136px!important;
  width:44px!important;
  height:55px!important;
  border-radius:2px 8px 8px 2px!important;
  transform:perspective(460px) rotateY(-42deg) skewY(.9deg)!important;
  transform-origin:left center!important;
  background-position:right center!important;
  opacity:.58!important;
}
.d66-ai-shell:not(.has-generated-design) .d66-ai-mockup-mug .d66-ai-mug-art{
  background:transparent!important;
  background-image:none!important;
}
.d66-ai-shell.has-generated-design .d66-ai-mug-art-front::after{
  content:"";
  position:absolute;
  inset:0;
  border-radius:5px;
  background:linear-gradient(90deg,rgba(255,255,255,.22),rgba(255,255,255,.05) 28%,rgba(255,255,255,0) 64%,rgba(0,0,0,.08));
  pointer-events:none;
}
.d66-ai-preview img{
  max-width:240px!important;
  aspect-ratio:205/95!important;
  object-fit:cover!important;
  border-radius:6px!important;
}
.d66-ai-mockup-plate .d66-ai-plate-art{
  inset:20px 26px!important;
  background-size:cover!important;
  background-position:center!important;
}
@media(max-width:760px){
  .d66-ai-mockup-mug{width:min(390px,100%)!important;height:320px!important}
  .d66-ai-mug-art-front{left:50%!important;margin-left:-58px!important;top:110px!important;width:112px!important;height:52px!important}
  .d66-ai-mug-art-left{left:50%!important;margin-left:-96px!important;top:113px!important;width:50px!important;height:48px!important}
  .d66-ai-mug-art-right{left:50%!important;margin-left:48px!important;top:113px!important;width:38px!important;height:48px!important}
}


/* Druck66 AI Configurator 0.6.1 — Tassenmotiv wirklich sichtbar auf der Tasse + Wrap-Vorschau */

/* Produktvorschau breiter/hochwertiger wie im Zielbild */
.d66-ai-summary{
  background:
    radial-gradient(circle at 50% 35%, rgba(42,42,42,.42), rgba(8,8,8,.98) 70%),
    #080808 !important;
}

/* echte Tasse bleibt Rohling, aber das Motiv muss darüber liegen */
.d66-ai-mockup-mug{
  width:min(520px,100%) !important;
  height:420px !important;
  margin:auto !important;
}

/* Tasse als Bild im Hintergrund */
.d66-ai-mockup-mug::before{
  z-index:3 !important;
}

/* Motiv-Layer jetzt ÜBER der Tasse, nicht darunter */
.d66-ai-mockup-mug .d66-ai-mug-art{
  z-index:7 !important;
  mix-blend-mode:multiply !important;
  opacity:.96 !important;
}

/* Hauptmotiv größer und breiter auf der Tassenfront */
.d66-ai-mug-art-front{
  left:126px !important;
  top:138px !important;
  width:168px !important;
  height:96px !important;
  border-radius:7px !important;
  background-size:cover !important;
  background-position:center center !important;
  transform:perspective(560px) rotateY(-7deg) skewY(.25deg) !important;
}

/* seitliche Fortsetzung für echten 205x95-Wrap */
.d66-ai-mug-art-left{
  left:84px !important;
  top:145px !important;
  width:68px !important;
  height:82px !important;
  border-radius:10px 2px 2px 10px !important;
  background-position:left center !important;
  transform:perspective(520px) rotateY(48deg) skewY(-.8deg) !important;
  opacity:.62 !important;
}

.d66-ai-mug-art-right{
  left:278px !important;
  top:145px !important;
  width:52px !important;
  height:82px !important;
  border-radius:2px 10px 10px 2px !important;
  background-position:right center !important;
  transform:perspective(520px) rotateY(-48deg) skewY(.8deg) !important;
  opacity:.46 !important;
}

/* ohne Design bleibt die Tasse blank */
.d66-ai-shell:not(.has-generated-design) .d66-ai-mug-art{
  background:transparent !important;
  background-image:none !important;
}

/* Produktfoto-Lichtfilm über der Tasse, aber hinter dem Motiv etwas transparent */
.d66-ai-shell.has-generated-design .d66-ai-mug-art-front::after{
  content:"";
  position:absolute;
  inset:0;
  border-radius:7px;
  background:
    linear-gradient(90deg,
      rgba(255,255,255,.18) 0%,
      rgba(255,255,255,.05) 22%,
      rgba(255,255,255,0) 62%,
      rgba(0,0,0,.10) 100%);
  pointer-events:none;
}

/* separate Druckflächen-Vorschau wie im Zielbild */
.d66-ai-wrap-preview{
  display:none;
  margin:1rem 0 1.1rem;
  padding:.9rem;
  border:1px solid rgba(255,255,255,.14);
  border-radius:9px;
  background:rgba(0,0,0,.22);
}

.d66-ai-shell.has-generated-design .d66-ai-wrap-preview{
  display:block;
}

.d66-ai-wrap-title{
  color:#f2e8d5;
  font-weight:900;
  margin-bottom:.45rem;
}

.d66-ai-wrap-grid{
  display:grid;
  grid-template-columns:1fr 1.2fr 1fr;
  border:1px solid rgba(255,255,255,.14);
  border-bottom:0;
  border-radius:8px 8px 0 0;
  overflow:hidden;
}

.d66-ai-wrap-grid span{
  text-align:center;
  font-size:.72rem;
  font-weight:900;
  color:#d8d0c4;
  padding:.35rem;
  border-right:1px solid rgba(255,255,255,.12);
}

.d66-ai-wrap-grid span:last-child{
  border-right:0;
}

.d66-ai-wrap-art{
  aspect-ratio:205 / 95;
  width:100%;
  border:1px solid rgba(32,215,207,.55);
  border-radius:0 0 8px 8px;
  background-size:cover;
  background-position:center;
  background-repeat:no-repeat;
  overflow:hidden;
  position:relative;
}

.d66-ai-wrap-art::before,
.d66-ai-wrap-art::after{
  content:"";
  position:absolute;
  top:0;
  bottom:0;
  width:1px;
  background:rgba(255,255,255,.32);
}

.d66-ai-wrap-art::before{left:33.333%}
.d66-ai-wrap-art::after{left:66.666%}

.d66-ai-wrap-preview p{
  margin:.55rem 0 0;
  color:var(--d66-ai-muted);
  font-size:.82rem;
}

/* Original-Bild unten kleiner, damit die Produktvorschau dominiert */
.d66-ai-preview{
  min-height:84px !important;
}

.d66-ai-preview img{
  max-width:150px !important;
}

/* Mobile passend skalieren */
@media (max-width:760px){
  .d66-ai-mockup-mug{
    width:min(390px,100%) !important;
    height:330px !important;
  }

  .d66-ai-mug-art-front{
    left:50% !important;
    margin-left:-58px !important;
    top:113px !important;
    width:124px !important;
    height:70px !important;
  }

  .d66-ai-mug-art-left{
    left:50% !important;
    margin-left:-96px !important;
    top:118px !important;
    width:48px !important;
    height:60px !important;
  }

  .d66-ai-mug-art-right{
    left:50% !important;
    margin-left:54px !important;
    top:118px !important;
    width:38px !important;
    height:60px !important;
  }
}


/* Druck66 AI Configurator 0.6.2 — Mapping-Reparatur
   Grund: Die KI-Bilder waren zu quadratisch und die Produktfläche wurde falsch interpretiert.
   Jetzt: breite Bildgenerierung + klare Produktflächen. */

/* Vorschau-Bild nicht mit Prompt vollstopfen */
.d66-ai-prompt{
  display:none !important;
}

/* Das kleine Originalbild unter der Tasse nur dezent */
.d66-ai-preview{
  min-height:72px !important;
  padding:.5rem !important;
}
.d66-ai-preview img{
  max-width:220px !important;
  aspect-ratio:205 / 95 !important;
  object-fit:cover !important;
}

/* ========== TASSE ========== */

/* Tasse bleibt echte PNG-Vorlage */
.d66-ai-mockup-mug{
  width:min(500px,100%) !important;
  height:400px !important;
  position:relative !important;
  overflow:visible !important;
}

/* Tassen-Rohling sichtbar über Bühne */
.d66-ai-mockup-mug::before{
  z-index:2 !important;
}

/* Side-Layer abschalten, die haben optisch nicht sauber gepasst */
.d66-ai-mug-art-left,
.d66-ai-mug-art-right{
  display:none !important;
}

/* Eine saubere breite Druckfläche auf der Vorderseite der Tasse.
   Keine winzigen Seitenfetzen mehr. */
.d66-ai-mug-art-front{
  display:block !important;
  position:absolute !important;
  left:108px !important;
  top:132px !important;
  width:190px !important;
  height:88px !important;
  border-radius:8px !important;
  background-size:cover !important;
  background-position:center center !important;
  background-repeat:no-repeat !important;
  transform:perspective(620px) rotateY(-4deg) skewY(.2deg) !important;
  transform-origin:center center !important;
  z-index:5 !important;
  opacity:.98 !important;
  mix-blend-mode:multiply !important;
  filter:contrast(1.03) saturate(1.02) !important;
  overflow:hidden !important;
  box-shadow:
    inset 14px 0 14px rgba(255,255,255,.10),
    inset -14px 0 16px rgba(0,0,0,.10) !important;
}

/* ohne Motiv wirklich leer */
.d66-ai-shell:not(.has-generated-design) .d66-ai-mug-art-front{
  background:transparent !important;
  background-image:none !important;
  box-shadow:none !important;
}

/* Lichtfilm über dem Motiv */
.d66-ai-shell.has-generated-design .d66-ai-mug-art-front::after{
  content:"";
  position:absolute;
  inset:0;
  border-radius:8px;
  background:linear-gradient(90deg,rgba(255,255,255,.20),rgba(255,255,255,.05) 26%,rgba(255,255,255,0) 66%,rgba(0,0,0,.08));
  pointer-events:none;
}

/* Der flache 205x95-Wrap ist die verbindliche Druckvorschau */
.d66-ai-wrap-preview{
  display:block !important;
}
.d66-ai-shell:not(.has-generated-design) .d66-ai-wrap-preview{
  opacity:.35;
}
.d66-ai-wrap-art{
  aspect-ratio:205 / 95 !important;
  background-size:cover !important;
  background-position:center !important;
}

/* ========== US-KENNZEICHEN ========== */

/* Weißer Rohling, Motiv als Vollflächen-Druck mit Sicherheitsabstand */
.d66-ai-mockup-plate{
  background:#fff !important;
  aspect-ratio:302 / 151 !important;
}

.d66-ai-plate-art{
  inset:14px 18px !important;
  border-radius:10px !important;
  background-size:cover !important;
  background-position:center center !important;
  background-repeat:no-repeat !important;
  z-index:2 !important;
  opacity:1 !important;
  mix-blend-mode:normal !important;
}

/* vor Generierung kein graues/braunes Feld */
.d66-ai-shell:not(.has-generated-design) .d66-ai-plate-art{
  background:transparent !important;
  background-image:none !important;
}

/* Löcher immer über dem Motiv */
.d66-ai-plate-slot{
  z-index:9 !important;
}

/* Varianten als breite Layouts anzeigen */
.d66-ai-variant img{
  aspect-ratio:205 / 95 !important;
  object-fit:cover !important;
}

/* Mobile */
@media(max-width:760px){
  .d66-ai-mockup-mug{
    height:330px !important;
  }
  .d66-ai-mug-art-front{
    left:50% !important;
    margin-left:-74px !important;
    top:112px !important;
    width:150px !important;
    height:70px !important;
  }
  .d66-ai-plate-art{
    inset:12px 14px !important;
  }
}


/* Druck66 AI Configurator 0.7.0 — Three.js 3D-Grundgerüst */
.d66-ai-3d-stage{
  position:relative;
  width:100%;
  aspect-ratio:1 / .78;
  min-height:330px;
  border:1px solid rgba(255,255,255,.14);
  border-radius:10px;
  overflow:hidden;
  background:
    radial-gradient(circle at 50% 35%, rgba(60,60,60,.38), rgba(5,5,5,.98) 70%),
    #070707;
  box-shadow:inset 0 0 0 1px rgba(255,255,255,.04);
  margin:.7rem 0 1rem;
}

.d66-ai-3d-stage canvas{
  width:100% !important;
  height:100% !important;
  display:block;
}

.d66-ai-3d-hint{
  position:absolute;
  right:.75rem;
  bottom:.65rem;
  color:rgba(244,239,229,.70);
  font-size:.72rem;
  background:rgba(0,0,0,.38);
  border:1px solid rgba(255,255,255,.10);
  border-radius:999px;
  padding:.35rem .6rem;
  pointer-events:none;
}

.d66-ai-legacy-preview{
  display:none !important;
}

.d66-ai-wrap-preview{
  display:none !important;
}

.d66-ai-summary h3:first-child{
  margin-bottom:.45rem;
}

@media(max-width:760px){
  .d66-ai-3d-stage{
    min-height:300px;
    aspect-ratio:1 / .88;
  }
}


/* Druck66 AI Configurator 0.7.1 — 3D-Vorschau repariert */
.d66-ai-3d-stage{
  min-height:460px !important;
  aspect-ratio:1 / .72 !important;
  background:
    radial-gradient(circle at 50% 42%, rgba(70,70,70,.34), rgba(7,7,7,.98) 72%),
    #080808 !important;
}

.d66-ai-3d-hint{
  right:1rem !important;
  bottom:1rem !important;
  font-size:.78rem !important;
}

.d66-ai-preview{
  display:none !important;
}

/* Alte Fake-Produktvorschau bleibt ausgeblendet */
.d66-ai-legacy-preview{
  display:none !important;
}

/* Die flache Druckfläche ist wichtig und bleibt als technische Kontrolle sichtbar */
.d66-ai-wrap-preview{
  display:block !important;
  margin-top:1rem !important;
}

.d66-ai-shell:not(.has-generated-design) .d66-ai-wrap-preview{
  display:none !important;
}

.d66-ai-wrap-title{
  font-size:.95rem !important;
}

.d66-ai-wrap-art{
  aspect-ratio:205 / 95 !important;
  background-size:cover !important;
  background-position:center !important;
}

@media(max-width:760px){
  .d66-ai-3d-stage{
    min-height:380px !important;
    aspect-ratio:1 / .9 !important;
  }
}


/* Druck66 AI Configurator 0.7.2 — Formatfix Tasse */
.d66-ai-3d-stage{
  min-height:470px !important;
}

.d66-ai-wrap-preview{
  display:block !important;
}

.d66-ai-shell:not(.has-generated-design) .d66-ai-wrap-preview{
  display:none !important;
}

.d66-ai-wrap-art{
  aspect-ratio:205 / 95 !important;
  background-size:cover !important;
  background-position:center !important;
}

.d66-ai-preview{
  display:none !important;
}


/* Druck66 AI Configurator 0.7.3 — ruhigere, größere 3D-Produktvorschau */
.d66-ai-3d-stage{
  min-height:500px !important;
  aspect-ratio:1 / .78 !important;
}

.d66-ai-wrap-preview{
  display:block !important;
}

.d66-ai-shell:not(.has-generated-design) .d66-ai-wrap-preview{
  display:none !important;
}

.d66-ai-wrap-title{
  font-size:.95rem !important;
}

.d66-ai-wrap-art{
  aspect-ratio:205 / 95 !important;
  background-size:cover !important;
  background-position:center !important;
}

.d66-ai-preview{
  display:none !important;
}

@media(max-width:760px){
  .d66-ai-3d-stage{
    min-height:400px !important;
  }
}


/* Druck66 AI Configurator 0.7.4 — Tasse: Druckfläche fast vollflächig */
.d66-ai-3d-stage{
  min-height:520px !important;
}

/* Technische Druckfläche bleibt sichtbar, aber die 3D-Vorschau ist jetzt Hauptdarsteller */
.d66-ai-wrap-preview{
  margin-top:.75rem !important;
}

.d66-ai-wrap-title{
  font-size:.9rem !important;
}

.d66-ai-wrap-preview p{
  font-size:.78rem !important;
}


/* Druck66 AI Configurator 0.7.5 — Tasse schmaler, Henkel ran, Kanten weg */
.d66-ai-3d-stage{
  min-height:530px !important;
  aspect-ratio:1 / .78 !important;
}

.d66-ai-wrap-preview{
  display:block !important;
  margin-top:.7rem !important;
}

.d66-ai-shell:not(.has-generated-design) .d66-ai-wrap-preview{
  display:none !important;
}

.d66-ai-wrap-art{
  aspect-ratio:205 / 95 !important;
  background-size:cover !important;
  background-position:center !important;
}

.d66-ai-preview{
  display:none !important;
}

@media(max-width:760px){
  .d66-ai-3d-stage{
    min-height:410px !important;
  }
}


/* Druck66 AI Configurator 0.7.6 — Ladezustand + Henkel-Aussparung */
.d66-ai-3d-stage{
  min-height:530px !important;
}

/* Auffälliger Ladezustand */
.d66-ai-shell.is-generating .d66-ai-summary{
  position:relative;
}

.d66-ai-shell.is-generating .d66-ai-summary::before{
  content:"Design wird erstellt …";
  position:absolute;
  inset:0;
  z-index:50;
  display:flex;
  align-items:center;
  justify-content:center;
  color:#041414;
  font-weight:1000;
  font-size:1.25rem;
  letter-spacing:.06em;
  text-transform:uppercase;
  background:
    radial-gradient(circle at center, rgba(32,215,207,.96), rgba(32,215,207,.60) 26%, rgba(0,0,0,.78) 72%);
  animation:d66PulseOverlay 1.05s infinite ease-in-out;
  pointer-events:none;
}

.d66-ai-shell.is-generating .d66-ai-summary::after{
  content:"";
  position:absolute;
  z-index:51;
  left:50%;
  top:calc(50% + 42px);
  width:54px;
  height:54px;
  margin-left:-27px;
  border-radius:50%;
  border:5px solid rgba(0,0,0,.22);
  border-top-color:#031313;
  animation:d66Spin .85s linear infinite;
  pointer-events:none;
}

@keyframes d66PulseOverlay{
  0%,100%{opacity:.88}
  50%{opacity:1}
}

@keyframes d66Spin{
  to{transform:rotate(360deg)}
}

.d66-ai-shell.is-generating [data-generate-image],
.d66-ai-shell.is-generating [data-create-variation]{
  box-shadow:0 0 0 4px rgba(32,215,207,.28), 0 0 32px rgba(32,215,207,.75) !important;
  animation:d66ButtonPulse .8s infinite ease-in-out;
}

@keyframes d66ButtonPulse{
  0%,100%{filter:brightness(1)}
  50%{filter:brightness(1.35)}
}

.d66-ai-wrap-preview{
  display:block !important;
}

.d66-ai-shell:not(.has-generated-design) .d66-ai-wrap-preview{
  display:none !important;
}

.d66-ai-preview{
  display:none !important;
}


/* Druck66 AI Configurator 0.7.7 — echte Tassenmaße */
.d66-ai-3d-stage{
  min-height:540px !important;
}

.d66-ai-wrap-title::after{
  content:" · Umfang 310 mm · Druck 205 × 95 mm";
  color:rgba(244,239,229,.70);
  font-size:.78rem;
  font-weight:700;
}

.d66-ai-wrap-preview p{
  font-size:.78rem !important;
}

.d66-ai-shell:not(.has-generated-design) .d66-ai-wrap-preview{
  display:none !important;
}


/* Druck66 AI Configurator 0.8.0 — GLB-Modell vorbereitet */
.d66-ai-model-note{
  position:absolute;
  left:.75rem;
  bottom:.75rem;
  z-index:20;
  color:#f4efd8;
  background:rgba(0,0,0,.62);
  border:1px solid rgba(255,255,255,.16);
  border-radius:999px;
  padding:.35rem .65rem;
  font-size:.72rem;
}

.d66-ai-3d-stage{
  min-height:540px !important;
}


/* Druck66 AI Configurator 0.8.1 — GLB-Modell integriert */
.d66-ai-model-note{
  position:absolute;
  left:.75rem;
  bottom:.75rem;
  z-index:20;
  color:#f4efd8;
  background:rgba(0,0,0,.62);
  border:1px solid rgba(255,255,255,.16);
  border-radius:999px;
  padding:.35rem .65rem;
  font-size:.72rem;
}

.d66-ai-3d-stage{
  min-height:540px !important;
}


/* Druck66 AI Configurator 0.8.2 — 3D-Debug */
.d66-ai-3d-error{
  position:absolute;
  inset:auto 1rem 1rem 1rem;
  z-index:60;
  background:rgba(0,0,0,.78);
  border:1px solid rgba(32,215,207,.45);
  border-radius:12px;
  padding:.85rem 1rem;
  color:#f4efd8;
  box-shadow:0 0 30px rgba(32,215,207,.16);
  text-align:left;
}

.d66-ai-3d-error strong{
  display:block;
  color:#20d7cf;
  margin-bottom:.25rem;
  font-size:.92rem;
}

.d66-ai-3d-error small{
  display:block;
  color:rgba(244,239,229,.76);
  font-size:.72rem;
  line-height:1.35;
  word-break:break-word;
}

.d66-ai-3d-stage{
  min-height:540px !important;
}


/* Druck66 AI Configurator 0.8.5.12 — Kennzeichen-Vorschau wieder aktiv */
.d66-ai-shell.is-product-plate .d66-ai-3d-stage,
.d66-ai-shell.is-product-plate .d66-ai-wrap-preview{
  display:none !important;
}

.d66-ai-shell.is-product-plate .d66-ai-mockup-plate.is-active{
  display:block !important;
  margin-top:.75rem !important;
}

.d66-ai-shell.is-product-mug .d66-ai-mockup-plate{
  display:none !important;
}


/* Druck66 AI Configurator 0.8.5.13 — Kennzeichen-Motiv sichtbar machen */
.d66-ai-shell.has-generated-design .d66-ai-plate-art[style]{
  background-size:cover !important;
  background-position:center center !important;
  background-repeat:no-repeat !important;
  opacity:1 !important;
  display:block !important;
}
.d66-ai-shell.is-product-plate.has-generated-design .d66-ai-mockup-plate.is-active .d66-ai-plate-art{
  z-index:2 !important;
}


/* Druck66 AI Configurator 0.8.5.14 — Kennzeichen vollflächig, Löcher frei */
.d66-ai-shell.is-product-plate .d66-ai-mockup-plate{
  position:relative !important;
  overflow:hidden !important;
  background:#fff !important;
  aspect-ratio:302 / 151 !important;
}

.d66-ai-shell.is-product-plate.has-generated-design .d66-ai-mockup-plate.is-active .d66-ai-plate-art{
  position:absolute !important;
  inset:0 !important;
  width:100% !important;
  height:100% !important;
  border-radius:22px !important;
  background-size:cover !important;
  background-position:center center !important;
  background-repeat:no-repeat !important;
  opacity:1 !important;
  display:block !important;
  z-index:1 !important;
}

.d66-ai-shell.is-product-plate .d66-ai-plate-print-border{
  position:absolute !important;
  inset:0 !important;
  z-index:3 !important;
  pointer-events:none !important;
}

.d66-ai-shell.is-product-plate .d66-ai-plate-slot{
  position:absolute !important;
  z-index:8 !important;
  background:#000 !important;
  box-shadow:0 0 0 2px rgba(255,255,255,.12) !important;
  pointer-events:none !important;
}

.d66-ai-shell.is-product-plate .d66-ai-wrap-preview,
.d66-ai-shell.is-product-plate .d66-ai-3d-stage{
  display:none !important;
}


/* Druck66 AI Configurator 0.8.5.15 — US-Kennzeichen exakt nach Bild 1: Vollfläche + Außen-Langlöcher */
.d66-ai-shell.is-product-plate .d66-ai-mockup-plate{
  position:relative !important;
  width:min(620px,100%) !important;
  aspect-ratio:302 / 151 !important;
  height:auto !important;
  border-radius:18px !important;
  overflow:hidden !important;
  background:#fff !important;
  background-image:none !important;
}

/* Motiv wirklich vollflächig im Kennzeichenformat, nicht contain/mit weißen Rändern. */
.d66-ai-shell.is-product-plate .d66-ai-mockup-plate .d66-ai-plate-art,
.d66-ai-shell.is-product-plate.has-generated-design .d66-ai-mockup-plate.is-active .d66-ai-plate-art,
.d66-ai-shell.is-product-plate.has-generated-design .d66-ai-plate-art[style*="background-image"]{
  position:absolute !important;
  inset:0 !important;
  width:100% !important;
  height:100% !important;
  border-radius:18px !important;
  background-size:cover !important;
  background-position:center center !important;
  background-repeat:no-repeat !important;
  background-color:transparent !important;
  box-shadow:none !important;
  border:0 !important;
  opacity:1 !important;
  display:block !important;
  z-index:1 !important;
}

.d66-ai-shell.is-product-plate .d66-ai-plate-print-border{
  display:none !important;
}

/* Löcher wie Bild 1: weiter außen, ca. 50% breiter, gleicher Außenabstand links/rechts wie oben/unten. */
.d66-ai-shell.is-product-plate .d66-ai-plate-slot{
  position:absolute !important;
  width:78px !important;
  height:16px !important;
  border-radius:8px !important;
  background:#000 !important;
  box-shadow:
    inset 0 1px 2px rgba(255,255,255,.10),
    0 0 0 1px rgba(255,255,255,.18) !important;
  z-index:9 !important;
  pointer-events:none !important;
}

.d66-ai-shell.is-product-plate .d66-ai-plate-slot-tl{left:22px !important;top:22px !important}
.d66-ai-shell.is-product-plate .d66-ai-plate-slot-tr{right:22px !important;top:22px !important}
.d66-ai-shell.is-product-plate .d66-ai-plate-slot-bl{left:22px !important;bottom:22px !important}
.d66-ai-shell.is-product-plate .d66-ai-plate-slot-br{right:22px !important;bottom:22px !important}

@media (max-width:760px){
  .d66-ai-shell.is-product-plate .d66-ai-plate-slot{
    width:54px !important;
    height:12px !important;
    border-radius:6px !important;
  }
  .d66-ai-shell.is-product-plate .d66-ai-plate-slot-tl{left:14px !important;top:14px !important}
  .d66-ai-shell.is-product-plate .d66-ai-plate-slot-tr{right:14px !important;top:14px !important}
  .d66-ai-shell.is-product-plate .d66-ai-plate-slot-bl{left:14px !important;bottom:14px !important}
  .d66-ai-shell.is-product-plate .d66-ai-plate-slot-br{right:14px !important;bottom:14px !important}
}


/* Druck66 AI Configurator 0.8.5.16 — Kennzeichen nach Originalfoto korrigiert */
.d66-ai-shell.is-product-plate .d66-ai-mockup-plate{
  position:relative !important;
  width:min(620px,100%) !important;
  aspect-ratio:302 / 151 !important;
  height:auto !important;
  border-radius:18px !important;
  overflow:hidden !important;
  background:#fff !important;
  background-image:none !important;
}

/* Druckbild: echtes Vollformat, keine contain-Darstellung und keine Innenränder. */
.d66-ai-shell.is-product-plate .d66-ai-mockup-plate .d66-ai-plate-art,
.d66-ai-shell.is-product-plate.has-generated-design .d66-ai-mockup-plate.is-active .d66-ai-plate-art,
.d66-ai-shell.is-product-plate.has-generated-design .d66-ai-plate-art[style*="background-image"]{
  position:absolute !important;
  inset:0 !important;
  width:100% !important;
  height:100% !important;
  border-radius:18px !important;
  background-size:cover !important;
  background-position:center center !important;
  background-repeat:no-repeat !important;
  background-color:transparent !important;
  box-shadow:none !important;
  border:0 !important;
  opacity:1 !important;
  display:block !important;
  z-index:1 !important;
}

.d66-ai-shell.is-product-plate .d66-ai-plate-print-border{
  display:none !important;
}

/* Löcher wie am echten Rohling: wieder etwas nach innen, aber breiter als vorher. */
.d66-ai-shell.is-product-plate .d66-ai-plate-slot{
  position:absolute !important;
  width:clamp(52px, 12.8%, 78px) !important;
  height:clamp(12px, 3.1%, 16px) !important;
  border-radius:999px !important;
  background:#000 !important;
  box-shadow:
    inset 0 1px 2px rgba(255,255,255,.12),
    0 0 0 1px rgba(255,255,255,.18) !important;
  z-index:9 !important;
  pointer-events:none !important;
}

.d66-ai-shell.is-product-plate .d66-ai-plate-slot-tl{left:clamp(24px,5.5%,34px) !important;top:clamp(22px,8%,30px) !important}
.d66-ai-shell.is-product-plate .d66-ai-plate-slot-tr{right:clamp(24px,5.5%,34px) !important;top:clamp(22px,8%,30px) !important}
.d66-ai-shell.is-product-plate .d66-ai-plate-slot-bl{left:clamp(24px,5.5%,34px) !important;bottom:clamp(22px,8%,30px) !important}
.d66-ai-shell.is-product-plate .d66-ai-plate-slot-br{right:clamp(24px,5.5%,34px) !important;bottom:clamp(22px,8%,30px) !important}


/* Druck66 AI Configurator 0.8.5.17 — US-Kennzeichen: Langlöcher nach Maß
   Originalmaß: Platte 302 x 151 mm, Langloch 25 x 5 mm,
   Abstand Loch-Außenkante: 22 mm links/rechts, 15 mm oben/unten. */
.d66-ai-shell.is-product-plate .d66-ai-mockup-plate{
  position:relative !important;
  aspect-ratio:302 / 151 !important;
  overflow:hidden !important;
}

.d66-ai-shell.is-product-plate .d66-ai-mockup-plate .d66-ai-plate-art,
.d66-ai-shell.is-product-plate.has-generated-design .d66-ai-mockup-plate.is-active .d66-ai-plate-art,
.d66-ai-shell.is-product-plate.has-generated-design .d66-ai-plate-art[style*="background-image"]{
  inset:0 !important;
  width:100% !important;
  height:100% !important;
  background-size:cover !important;
  background-position:center center !important;
  background-repeat:no-repeat !important;
}

.d66-ai-shell.is-product-plate .d66-ai-plate-slot{
  width:8.1967% !important;   /* 25 / 305 */
  height:3.2258% !important;  /* 5 / 155 */
  min-width:0 !important;
  min-height:0 !important;
  border-radius:999px !important;
  background:#000 !important;
  box-shadow:
    inset 0 1px 2px rgba(255,255,255,.13),
    0 0 0 1px rgba(255,255,255,.18) !important;
}

.d66-ai-shell.is-product-plate .d66-ai-plate-slot-tl{left:7.2131% !important;top:9.6774% !important}
.d66-ai-shell.is-product-plate .d66-ai-plate-slot-tr{right:7.2131% !important;top:9.6774% !important}
.d66-ai-shell.is-product-plate .d66-ai-plate-slot-bl{left:7.2131% !important;bottom:9.6774% !important}
.d66-ai-shell.is-product-plate .d66-ai-plate-slot-br{right:7.2131% !important;bottom:9.6774% !important}

/* Diese Maßangaben bleiben auch mobil proportional korrekt; ältere mobile Pixelwerte werden überschrieben. */
@media (max-width:760px){
  .d66-ai-shell.is-product-plate .d66-ai-plate-slot{
    width:8.1967% !important;
    height:3.2258% !important;
    border-radius:999px !important;
  }
  .d66-ai-shell.is-product-plate .d66-ai-plate-slot-tl{left:7.2131% !important;top:9.6774% !important}
  .d66-ai-shell.is-product-plate .d66-ai-plate-slot-tr{right:7.2131% !important;top:9.6774% !important}
  .d66-ai-shell.is-product-plate .d66-ai-plate-slot-bl{left:7.2131% !important;bottom:9.6774% !important}
  .d66-ai-shell.is-product-plate .d66-ai-plate-slot-br{right:7.2131% !important;bottom:9.6774% !important}
}


/* Druck66 AI Configurator 0.8.5.19 — Kennzeichenformat vollständig zeigen + Textregeln
   Die KI liefert Bilder in Standard-Bildgrößen. Für die Vorschau wird das komplette Bild
   bewusst in das echte 302:151-Kennzeichenformat eingepasst, damit kein Text oben/unten
   abgeschnitten wird. */
.d66-ai-shell.is-product-plate .d66-ai-mockup-plate .d66-ai-plate-art,
.d66-ai-shell.is-product-plate.has-generated-design .d66-ai-mockup-plate.is-active .d66-ai-plate-art,
.d66-ai-shell.is-product-plate.has-generated-design .d66-ai-plate-art[style*="background-image"]{
  inset:0 !important;
  width:100% !important;
  height:100% !important;
  background-size:100% 100% !important;
  background-position:center center !important;
  background-repeat:no-repeat !important;
}

/* Lochmaße bleiben nach Originalmaß: 25 x 5 mm, Position 22 mm seitlich und 15 mm oben/unten. */
.d66-ai-shell.is-product-plate .d66-ai-plate-slot{
  width:8.1967% !important;   /* 25 / 305 */
  height:3.2258% !important;  /* 5 / 155 */
  border-radius:999px !important;
}
.d66-ai-shell.is-product-plate .d66-ai-plate-slot-tl{left:7.2131% !important;top:9.6774% !important}
.d66-ai-shell.is-product-plate .d66-ai-plate-slot-tr{right:7.2131% !important;top:9.6774% !important}
.d66-ai-shell.is-product-plate .d66-ai-plate-slot-bl{left:7.2131% !important;bottom:9.6774% !important}
.d66-ai-shell.is-product-plate .d66-ai-plate-slot-br{right:7.2131% !important;bottom:9.6774% !important}


/* Druck66 AI Configurator 0.8.5.20 — Mobile 3D-Drehung */
.d66-ai-3d-stage,
.d66-ai-3d-stage canvas{
  touch-action:none !important;
  -ms-touch-action:none !important;
  user-select:none !important;
  -webkit-user-select:none !important;
  -webkit-touch-callout:none !important;
}

/* Druck66 0.8.6.0 Premium Foundation */
.d66-ai-config-panel{margin-top:22px;padding:18px;border-radius:14px;background:linear-gradient(180deg,rgba(255,255,255,.055),rgba(255,255,255,.022)),rgba(0,0,0,.26);color:var(--d66-ai-text);border:1px solid rgba(255,255,255,.12);box-shadow:0 18px 45px rgba(0,0,0,.28)}
.d66-ai-config-panel h3{margin:0 0 12px;text-align:center;color:var(--d66-ai-text)}.d66-ai-config-panel p{margin:0 0 14px;text-align:center;color:var(--d66-ai-muted);line-height:1.35}.d66-ai-config-panel label{display:block;margin:10px 0 8px;font-weight:800;color:var(--d66-ai-muted);text-align:center;font-size:13px}.d66-ai-config-panel input,.d66-ai-config-panel select{width:100%;border:1px solid rgba(255,255,255,.14);border-radius:10px;padding:13px 14px;background:rgba(0,0,0,.42);color:var(--d66-ai-text);font-weight:800;box-shadow:none;outline:none}.d66-ai-config-panel input:focus,.d66-ai-config-panel select:focus{border-color:rgba(32,215,207,.72);box-shadow:0 0 0 3px rgba(32,215,207,.12)}.d66-ai-config-panel select option{background:#101313;color:#f4efe5}
.d66-ai-field-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px;margin-top:12px}.d66-ai-config-panel small{display:block;margin-top:14px;text-align:center;color:#667085}.d66-ai-mug-config[hidden],.d66-ai-plate-config[hidden],[hidden]{display:none!important}
.d66-ai-mockup-plate{overflow:hidden;background:transparent!important;border:0!important;box-shadow:none!important;padding:0!important}.d66-ai-plate-art{position:absolute;inset:0;background-size:100% 100%!important;background-position:center!important;background-repeat:no-repeat!important;border-radius:14px}.d66-ai-mockup-plate:before,.d66-ai-mockup-plate:after{display:none!important}.d66-ai-plate-print-border,.d66-ai-plate-slot{display:none!important}
.d66-ai-mockup-mug{--mug-accent:var(--d66-mug-accent,#fff)}
.d66-ai-mockup-mug:after{content:"";position:absolute;right:8%;top:28%;width:20%;height:36%;border:13px solid var(--d66-mug-accent,#fff);border-left:0;border-radius:0 40px 40px 0;filter:drop-shadow(0 2px 4px rgba(0,0,0,.25));pointer-events:none}.d66-ai-mockup-mug:before{content:"";position:absolute;inset:10% 18% 12% 18%;border-radius:50%;box-shadow:inset 0 0 0 22px var(--d66-mug-accent,#fff);opacity:.45;pointer-events:none}
@media(max-width:700px){.d66-ai-field-grid{grid-template-columns:1fr}.d66-ai-config-panel{padding:14px;border-radius:16px}.d66-ai-config-panel input,.d66-ai-config-panel select{font-size:16px}.d66-ai-mockup-plate{min-height:0!important}}


/* Druck66 0.8.6.6 — Medien-System */
.d66-ai-media-panel{margin-top:1rem;padding:1rem;border:1px solid rgba(255,255,255,.12);border-radius:10px;background:rgba(0,0,0,.22)}
.d66-ai-media-panel h3{margin:.1rem 0 .35rem;color:var(--d66-ai-text)}
.d66-ai-media-panel p{margin:0 0 .75rem;color:var(--d66-ai-muted);font-size:.9rem}
.d66-ai-upload-drop{display:grid;gap:.25rem;place-items:center;text-align:center;padding:1rem;border:1px dashed rgba(32,215,207,.55);border-radius:10px;background:rgba(32,215,207,.06);cursor:pointer;transition:.18s ease}
.d66-ai-upload-drop input{position:absolute;inline-size:1px;block-size:1px;opacity:0;pointer-events:none}
.d66-ai-upload-drop strong{color:var(--d66-ai-accent)}
.d66-ai-upload-drop small,.d66-ai-upload-status{color:var(--d66-ai-muted);font-size:.82rem}
.d66-ai-upload-drop.is-dragover{background:rgba(32,215,207,.16);border-color:var(--d66-ai-accent);transform:translateY(-1px)}
.d66-ai-upload-status{min-height:1.2em;margin-top:.6rem}
.d66-ai-upload-preview{display:grid;grid-template-columns:repeat(auto-fill,minmax(86px,1fr));gap:.65rem;margin-top:.7rem}
.d66-ai-upload-empty{grid-column:1/-1;color:var(--d66-ai-muted);font-size:.86rem;border:1px dashed rgba(255,255,255,.14);border-radius:8px;padding:.75rem;text-align:center}
.d66-ai-upload-item{position:relative;border:1px solid rgba(255,255,255,.14);border-radius:9px;background:rgba(0,0,0,.28);padding:.35rem;overflow:hidden}
.d66-ai-upload-item img{width:100%;aspect-ratio:1/1;object-fit:cover;border-radius:7px;display:block}
.d66-ai-upload-item button{position:absolute;top:.25rem;right:.25rem;width:24px;height:24px;border:0;border-radius:99px;background:rgba(0,0,0,.72);color:#fff;font-weight:900;cursor:pointer;line-height:1}
.d66-ai-upload-item span,.d66-ai-upload-item small{display:block;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font-size:.72rem;margin-top:.25rem;color:var(--d66-ai-muted)}
.d66-ai-upload-item small{opacity:.8;margin-top:.05rem}


/* 0.8.6.9 – intelligente Varianten */
.d66-ai-variant-intro{margin:.25rem 0 .75rem;color:#6b7280;font-size:.92rem}
.d66-ai-variant-presets{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:.55rem;margin:.5rem 0 1rem}
.d66-ai-variant-presets button{border:1px solid rgba(17,24,39,.16);background:#111827;color:#fff;border-radius:14px;padding:.7rem .75rem;font-weight:700;cursor:pointer;box-shadow:0 8px 20px rgba(17,24,39,.12)}
.d66-ai-variant-presets button:hover:not(:disabled){transform:translateY(-1px)}
.d66-ai-variant-presets button:disabled{opacity:.45;cursor:not-allowed;transform:none}
.d66-ai-variant small{display:block;color:#6b7280;font-size:.72rem;margin-top:.15rem}
@media (max-width:560px){.d66-ai-variant-presets{grid-template-columns:1fr}}

/* Druck66 0.8.6.18 — Druckmotive nicht mehr beschneiden
   Generierte Bilder werden serverseitig auf echte Druckflächen normalisiert:
   Tasse 205:95, Kennzeichen 302:151. Die Vorschau darf deshalb nicht mehr cover-croppen. */
.d66-ai-mug-art,
.d66-ai-wrap-art,
.d66-ai-plate-art,
.d66-ai-shell.is-product-plate .d66-ai-plate-art,
.d66-ai-shell.is-product-plate.has-generated-design .d66-ai-plate-art[style*="background-image"]{
  background-size:100% 100% !important;
  background-position:center center !important;
  background-repeat:no-repeat !important;
}

.d66-ai-shell.is-product-plate .d66-ai-mockup-plate{
  aspect-ratio:302 / 151 !important;
}

.d66-ai-wrap-art{
  aspect-ratio:310 / 95 !important;
}

.d66-ai-wrap-title::after{
  content:"" !important;
}

.d66-ai-shell.is-product-mug .d66-ai-mockup-plate,
.d66-ai-shell.is-product-mug .d66-ai-plate-art{
  background-image:none !important;
}

.d66-ai-shell.is-product-plate .d66-ai-mug-art,
.d66-ai-shell.is-product-plate .d66-ai-wrap-art{
  background-image:none !important;
}

/* Druck66 0.8.6.32 - reset action */
.d66-ai-design-actions{
  grid-template-columns:minmax(0,1fr) auto;
  align-items:stretch;
}

.d66-ai-design-actions small{
  grid-column:1 / -1;
}

.d66-ai-reset-button{
  border:1px solid rgba(255,255,255,.18);
  background:rgba(255,255,255,.08);
  color:var(--d66-ai-text);
  border-radius:5px;
  padding:.72rem 1rem;
  font-weight:900;
  cursor:pointer;
  white-space:nowrap;
}

.d66-ai-reset-button:hover{
  border-color:rgba(32,215,207,.45);
  background:rgba(32,215,207,.12);
}

@media(max-width:560px){
  .d66-ai-design-actions{
    grid-template-columns:1fr;
  }
}

/* 0.8.7.3 Druckflächen-Editor */
.d66-ai-art-editor{
  margin:14px 0 18px;
  padding:14px;
  border:1px solid rgba(38,255,240,.22);
  border-radius:16px;
  background:linear-gradient(180deg,rgba(7,20,22,.92),rgba(9,9,10,.92));
  box-shadow:0 14px 34px rgba(0,0,0,.28), inset 0 1px 0 rgba(255,255,255,.04);
}
.d66-ai-art-editor[hidden]{display:none!important}
.d66-ai-art-editor-title{
  color:#26fff0;
  text-transform:uppercase;
  letter-spacing:.08em;
  font-weight:800;
  font-size:.86rem;
  margin-bottom:10px;
  text-align:center;
}
.d66-ai-art-editor label{
  display:grid;
  grid-template-columns:110px 1fr;
  gap:10px;
  align-items:center;
  color:#e9e2d5;
  font-weight:700;
  font-size:.88rem;
  margin:8px 0;
}
.d66-ai-art-editor input[type=range]{
  width:100%;
  accent-color:#20d0ca;
}
.d66-ai-art-editor-actions{
  display:grid;
  grid-template-columns:repeat(3,1fr);
  gap:8px;
  margin-top:12px;
}
.d66-ai-art-editor-actions button{
  border:1px solid rgba(255,255,255,.12);
  border-radius:12px;
  background:rgba(12,25,44,.95);
  color:#fff;
  font-weight:800;
  padding:10px 8px;
  cursor:pointer;
}
.d66-ai-art-editor-actions button:hover{border-color:rgba(38,255,240,.55);}

.d66-ai-upload-progress{position:relative;display:flex;align-items:center;gap:.45rem;margin-top:.45rem;height:8px;padding:0;border:1px solid rgba(32,215,207,.28);border-radius:999px;background:rgba(255,255,255,.08);overflow:visible;color:var(--d66-ai-cream,#f5ebdc);font-size:.68rem;font-weight:800;letter-spacing:.02em}
.d66-ai-upload-progress[hidden]{display:none!important}
.d66-ai-upload-progress::before{content:"";position:absolute;inset:0;border-radius:999px;background:linear-gradient(90deg,rgba(32,215,207,.10),rgba(32,215,207,.025));pointer-events:none}
.d66-ai-upload-progress-bar{position:absolute;left:0;top:0;bottom:0;width:0%;border-radius:999px;background:linear-gradient(90deg,rgba(32,215,207,.95),rgba(41,255,236,.72));box-shadow:0 0 10px rgba(32,215,207,.45);transition:width .16s linear}
.d66-ai-upload-progress.is-processing .d66-ai-upload-progress-bar{animation:d66UploadPulse 1.1s ease-in-out infinite}
.d66-ai-upload-progress span{position:absolute;right:0;top:11px;z-index:1;color:rgba(245,235,220,.82);text-shadow:0 1px 2px rgba(0,0,0,.55);line-height:1}
@keyframes d66UploadPulse{0%,100%{opacity:.65}50%{opacity:1}}
.d66-ai-upload-drop.is-uploading{opacity:.86;pointer-events:none;border-color:var(--d66-ai-accent);background:rgba(32,215,207,.12)}


/* Druck66 0.8.7.11 — flache Tassen-Vorschau nutzt eigene 205 × 95 mm Druckflächen-Datei */
.d66-ai-shell.is-product-mug .d66-ai-wrap-title{
  text-align:left;
}
.d66-ai-shell.is-product-mug .d66-ai-wrap-grid{
  display:none !important;
}
.d66-ai-shell.is-product-mug .d66-ai-wrap-art{
  aspect-ratio:205 / 95 !important;
  width:100% !important;
  max-width:100% !important;
  background-size:100% 100% !important; /* eigene 205-mm-Druckflächen-Vorschau, kein Wrap-Crop */
  background-position:center center !important;
  background-repeat:no-repeat !important;
  border-radius:8px;
  overflow:hidden;
}
.d66-ai-shell.is-product-mug .d66-ai-wrap-art::before,
.d66-ai-shell.is-product-mug .d66-ai-wrap-art::after{
  display:none !important;
  content:none !important;
}

/* Druck66 0.8.8.4 — Mikrofon-Button korrigiert */
.d66-ai-input-wrap{position:relative;display:block;width:100%;}
.d66-ai-input-wrap textarea{padding-right:7.35rem!important;min-height:78px;}
.d66-ai-voice-button{position:absolute;right:.55rem;bottom:.55rem;width:auto!important;min-width:6.15rem;height:2.45rem;border-radius:.62rem!important;border:1px solid rgba(32,215,207,.72)!important;background:linear-gradient(180deg,rgba(17,28,31,.98),rgba(7,14,16,.98))!important;color:#f4efe5!important;display:inline-flex;align-items:center;justify-content:center;gap:.42rem;padding:0 .78rem!important;font-size:.72rem;font-weight:900;letter-spacing:.04em;line-height:1;box-shadow:0 .45rem 1rem rgba(0,0,0,.28),inset 0 1px 0 rgba(255,255,255,.08);cursor:pointer;white-space:nowrap;overflow:hidden;z-index:3;transition:background .16s ease,border-color .16s ease,transform .16s ease,box-shadow .16s ease;}
.d66-ai-voice-button:hover{background:linear-gradient(180deg,rgba(25,48,51,.98),rgba(9,23,25,.98))!important;border-color:rgba(32,215,207,.95)!important;transform:translateY(-1px);box-shadow:0 .6rem 1.25rem rgba(0,0,0,.34),0 0 0 1px rgba(32,215,207,.14);}
.d66-ai-voice-button:focus-visible{outline:2px solid rgba(32,215,207,.9);outline-offset:2px;}
.d66-ai-voice-icon{width:1.02rem;height:1.02rem;display:block;flex:0 0 auto;fill:currentColor;color:var(--d66-ai-accent);}
.d66-ai-voice-text{display:inline-block;font-size:.68rem;text-transform:uppercase;}
.d66-ai-voice-button.is-listening{background:linear-gradient(180deg,var(--d66-ai-accent),#0aaeb0)!important;border-color:rgba(255,255,255,.45)!important;color:#031313!important;animation:d66VoicePulse 1.1s ease-in-out infinite;}
.d66-ai-voice-button.is-listening .d66-ai-voice-icon{color:#031313;}
.d66-ai-voice-button[hidden]{display:none!important;}
@keyframes d66VoicePulse{0%,100%{box-shadow:0 0 0 0 rgba(32,215,207,.34),0 .6rem 1.2rem rgba(0,0,0,.28)}50%{box-shadow:0 0 0 .42rem rgba(32,215,207,0),0 .6rem 1.2rem rgba(0,0,0,.28)}}
@media(max-width:640px){.d66-ai-input-wrap textarea{min-height:70px;padding-right:4.15rem!important}.d66-ai-voice-button{min-width:2.65rem!important;width:2.65rem!important;height:2.2rem;right:.5rem;bottom:.5rem;padding:0!important;border-radius:.58rem!important}.d66-ai-voice-text{display:none}.d66-ai-voice-icon{width:1.1rem;height:1.1rem}}

/* Druck66 0.8.8.0 — direkter Druckflächen-Editor */
.d66-ai-art-editor-hint{
  margin:-2px 0 12px;
  color:rgba(245,235,220,.72);
  font-size:.78rem;
  line-height:1.35;
  text-align:center;
}
.d66-ai-art-editor label{
  display:none !important;
}
.d66-ai-wrap-art.is-direct-editable{
  position:relative;
  cursor:grab;
  touch-action:none;
  user-select:none;
  outline:1px solid rgba(38,255,240,.18);
  outline-offset:-1px;
}
.d66-ai-wrap-art.is-direct-editable.is-dragging{
  cursor:grabbing;
}
.d66-ai-wrap-art.is-direct-editable::after{
  content:"Motiv ziehen · Ecke skalieren";
  position:absolute;
  left:10px;
  bottom:8px;
  padding:5px 8px;
  border-radius:999px;
  background:rgba(0,0,0,.56);
  color:rgba(245,235,220,.84);
  font-size:.68rem;
  font-weight:800;
  letter-spacing:.02em;
  pointer-events:none;
  z-index:5;
  display:block!important;
}
.d66-ai-direct-resize-handle{
  position:absolute;
  right:8px;
  bottom:8px;
  width:34px;
  height:34px;
  border-radius:10px;
  border:1px solid rgba(38,255,240,.75);
  background:linear-gradient(180deg,rgba(24,44,48,.96),rgba(5,12,14,.96));
  box-shadow:0 6px 16px rgba(0,0,0,.34),0 0 0 1px rgba(38,255,240,.08),inset 0 1px 0 rgba(255,255,255,.08);
  cursor:nwse-resize;
  z-index:7;
  padding:0;
}
.d66-ai-direct-resize-handle[hidden]{display:none!important;}
.d66-ai-direct-resize-handle span,
.d66-ai-direct-resize-handle::before,
.d66-ai-direct-resize-handle::after{
  content:"";
  position:absolute;
  right:8px;
  bottom:8px;
  border-right:2px solid rgba(38,255,240,.9);
  border-bottom:2px solid rgba(38,255,240,.9);
  border-radius:1px;
}
.d66-ai-direct-resize-handle span{width:7px;height:7px;}
.d66-ai-direct-resize-handle::before{width:13px;height:13px;opacity:.72;}
.d66-ai-direct-resize-handle::after{width:19px;height:19px;opacity:.42;}
.d66-ai-direct-resize-handle:hover{
  border-color:rgba(255,255,255,.5);
  background:linear-gradient(180deg,var(--d66-ai-accent),#0aaeb0);
}
.d66-ai-direct-resize-handle:hover span,
.d66-ai-direct-resize-handle:hover::before,
.d66-ai-direct-resize-handle:hover::after{
  border-color:#031313;
}
@media(max-width:640px){
  .d66-ai-art-editor-hint{font-size:.72rem;}
  .d66-ai-wrap-art.is-direct-editable::after{font-size:.62rem;left:7px;bottom:7px;}
  .d66-ai-direct-resize-handle{width:32px;height:32px;right:7px;bottom:7px;}
}

/* 0.8.8.1: Text direkt auf der Druckfläche */
.d66-ai-direct-text-layer{
  position:absolute;
  left:50%;
  top:50%;
  transform:translate(-50%,-50%);
  z-index:8;
  font-family:"Arial Black",Impact,Arial,sans-serif;
  font-weight:900;
  line-height:1;
  letter-spacing:.04em;
  color:#fff;
  text-transform:none;
  text-align:center;
  text-shadow:none;
  cursor:move;
  touch-action:none;
  user-select:none;
  padding:.08em .14em;
  border:1px dashed rgba(38,255,240,.75);
  border-radius:6px;
  background:rgba(0,0,0,.10);
  max-width:92%;
  white-space:nowrap;
}
.d66-ai-direct-text-layer[hidden]{display:none!important;}
.d66-ai-direct-text-layer span{pointer-events:none;}
.d66-ai-direct-text-resize{
  position:absolute;
  right:-13px;
  bottom:-13px;
  width:26px;
  height:26px;
  border-radius:8px;
  border:1px solid rgba(38,255,240,.88);
  background:linear-gradient(180deg,rgba(24,44,48,.98),rgba(5,12,14,.98));
  box-shadow:0 5px 14px rgba(0,0,0,.34);
  cursor:nwse-resize;
  padding:0;
}
.d66-ai-direct-text-resize::before,
.d66-ai-direct-text-resize::after{
  content:"";
  position:absolute;
  right:6px;
  bottom:6px;
  border-right:2px solid rgba(38,255,240,.95);
  border-bottom:2px solid rgba(38,255,240,.95);
  border-radius:1px;
}
.d66-ai-direct-text-resize::before{width:7px;height:7px;}
.d66-ai-direct-text-resize::after{width:12px;height:12px;opacity:.55;}
.d66-ai-wrap-art.is-dragging-text .d66-ai-direct-text-layer,
.d66-ai-wrap-art.is-resizing-text .d66-ai-direct-text-layer{
  border-color:#fff;
  background:rgba(38,255,240,.10);
}
.d66-ai-wrap-art.is-direct-editable:has(.d66-ai-direct-text-layer:not([hidden]))::after{
  content:"Motiv oder Text ziehen · Ecke skalieren";
}
@media(max-width:640px){
  .d66-ai-direct-text-resize{width:24px;height:24px;right:-12px;bottom:-12px;}
}


/* Druck66 0.8.8.3 — direkter Druckflächen-Editor auch für US-Kennzeichen */
.d66-ai-shell.is-product-plate.has-generated-design .d66-ai-wrap-preview{
  display:block !important;
}
.d66-ai-shell.is-product-plate .d66-ai-wrap-preview{
  margin-top:.85rem !important;
}
.d66-ai-shell.is-product-plate .d66-ai-wrap-title::after{
  content:"";
}
.d66-ai-shell.is-product-plate .d66-ai-wrap-art{
  aspect-ratio:302 / 151 !important;
  width:100% !important;
  max-width:100% !important;
  border-radius:8px !important;
  background-size:100% 100% !important;
  background-position:center center !important;
  background-repeat:no-repeat !important;
}
.d66-ai-shell.is-product-plate .d66-ai-wrap-art::before,
.d66-ai-shell.is-product-plate .d66-ai-wrap-art::after{
  display:none !important;
  content:none !important;
}
.d66-ai-shell.is-product-plate .d66-ai-art-editor-hint::after{
  content:"";
}


/* Druck66 0.8.8.5 — mehrere Upload-Fotos als einzelne Ebenen */
.d66-ai-wrap-art.has-photo-layers{background-size:100% 100%!important;}
.d66-ai-wrap-art.has-photo-layers::after{content:"Bild anfassen · Ecke skalieren";}
.d66-ai-photo-layer{position:absolute;z-index:8;border:2px solid rgba(38,255,240,.58);border-radius:6px;background-size:cover;background-position:center;background-repeat:no-repeat;box-shadow:0 0 0 1px rgba(0,0,0,.38),0 8px 20px rgba(0,0,0,.22);cursor:grab;touch-action:none;}
.d66-ai-photo-layer.is-active{border-color:rgba(38,255,240,1);box-shadow:0 0 0 2px rgba(38,255,240,.18),0 10px 24px rgba(0,0,0,.32)}
.d66-ai-photo-layer-resize{position:absolute;right:-8px;bottom:-8px;width:24px;height:24px;border-radius:7px;border:1px solid rgba(255,255,255,.65);background:linear-gradient(180deg,var(--d66-ai-accent),#0aaeb0);cursor:nwse-resize;padding:0;box-shadow:0 4px 12px rgba(0,0,0,.35);}
.d66-ai-photo-layer-resize:before,.d66-ai-photo-layer-resize:after{content:"";position:absolute;right:6px;bottom:6px;border-right:2px solid #042022;border-bottom:2px solid #042022;}
.d66-ai-photo-layer-resize:before{width:7px;height:7px}.d66-ai-photo-layer-resize:after{width:12px;height:12px;opacity:.55}
.d66-ai-art-editor label{display:none!important;}

/* Druck66 0.8.9.0 — Text-Ebenen-System */
.d66-ai-text-panel{
  margin-top:1rem;
}
.d66-ai-text-panel h3{
  margin-bottom:.75rem;
}
.d66-ai-text-controls{
  display:grid;
  grid-template-columns:minmax(0,1fr) 48px minmax(150px,190px) auto;
  gap:.65rem;
  align-items:center;
}
.d66-ai-text-controls input[type="text"]{
  width:100%;
  min-height:46px;
  border-radius:10px;
  border:1px solid rgba(255,255,255,.14);
  background:#070b0d;
  color:#fff;
  padding:0 .9rem;
  font-weight:800;
}
.d66-ai-text-controls select{height:46px;border:1px solid rgba(38,255,240,.25);border-radius:10px;background:#070b0d;color:#fff;padding:0 .7rem;font-weight:800;}
.d66-ai-text-controls input[type="color"]{
  width:48px;
  height:46px;
  border:1px solid rgba(38,255,240,.35);
  border-radius:10px;
  background:#070b0d;
  padding:4px;
}
.d66-ai-text-controls button,
.d66-ai-text-row button{
  border-radius:10px;
  border:1px solid rgba(38,255,240,.35);
  background:#0b1d2f;
  color:#fff;
  font-weight:900;
  padding:.75rem 1rem;
  cursor:pointer;
}
.d66-ai-text-controls button:hover,
.d66-ai-text-row button:hover{
  border-color:#24d1d1;
  box-shadow:0 0 0 1px rgba(36,209,209,.2);
}
.d66-ai-text-list{
  display:flex;
  flex-direction:column;
  gap:.5rem;
  margin-top:.7rem;
}
.d66-ai-text-empty{
  border:1px dashed rgba(255,255,255,.14);
  border-radius:10px;
  padding:.7rem;
  color:rgba(255,255,255,.58);
  text-align:center;
}
.d66-ai-text-row{
  display:grid;
  grid-template-columns:auto minmax(0,1fr) minmax(130px,170px) 44px 38px;
  gap:.45rem;
  align-items:center;
  border:1px solid rgba(255,255,255,.10);
  border-radius:12px;
  padding:.45rem;
  background:rgba(255,255,255,.03);
}
.d66-ai-text-row.is-active{
  border-color:rgba(38,255,240,.62);
  background:rgba(38,255,240,.06);
}
.d66-ai-text-row input[type="text"]{
  min-height:38px;
  border-radius:8px;
  border:1px solid rgba(255,255,255,.13);
  background:#05080a;
  color:#fff;
  padding:0 .65rem;
  font-weight:800;
}
.d66-ai-text-row select{min-height:38px;border-radius:8px;border:1px solid rgba(255,255,255,.13);background:#05080a;color:#fff;padding:0 .5rem;font-weight:800;}
.d66-ai-text-row input[type="color"]{
  width:44px;
  height:38px;
  border-radius:8px;
  border:1px solid rgba(255,255,255,.15);
  background:#05080a;
  padding:3px;
}
.d66-ai-text-row .d66-ai-text-delete{
  padding:0;
  width:38px;
  height:38px;
  background:rgba(60,20,20,.75);
  border-color:rgba(255,90,90,.35);
  font-size:1.2rem;
}
.d66-ai-text-layer-node{
  position:absolute;
  transform:translate(-50%,-50%);
  z-index:12;
  font-family:"Arial Black",Impact,Arial,sans-serif;
  font-weight:900;
  line-height:1;
  letter-spacing:.04em;
  text-transform:none;
  text-align:center;
  text-shadow:none;
  cursor:move;
  touch-action:none;
  user-select:none;
  padding:.08em .14em;
  border:1px dashed rgba(38,255,240,.65);
  border-radius:6px;
  background:rgba(0,0,0,.10);
  max-width:94%;
  white-space:nowrap;
}
.d66-ai-text-layer-node.is-active{
  border-color:#fff;
  background:rgba(38,255,240,.12);
}
.d66-ai-text-layer-node span{pointer-events:none;}
.d66-ai-text-layer-resize{
  position:absolute;
  right:-13px;
  bottom:-13px;
  width:26px;
  height:26px;
  border-radius:8px;
  border:1px solid rgba(38,255,240,.88);
  background:linear-gradient(180deg,rgba(24,44,48,.98),rgba(5,12,14,.98));
  box-shadow:0 5px 14px rgba(0,0,0,.34);
  cursor:nwse-resize;
  padding:0;
}
.d66-ai-text-layer-resize::before,
.d66-ai-text-layer-resize::after{
  content:"";
  position:absolute;
  right:6px;
  bottom:6px;
  border-right:2px solid rgba(38,255,240,.95);
  border-bottom:2px solid rgba(38,255,240,.95);
  border-radius:1px;
}
.d66-ai-text-layer-resize::before{width:7px;height:7px;}
.d66-ai-text-layer-resize::after{width:12px;height:12px;opacity:.55;}
@media(max-width:640px){
  .d66-ai-text-controls{grid-template-columns:minmax(0,1fr) 44px;}
  .d66-ai-text-controls button{grid-column:1 / -1;}
  .d66-ai-text-row{grid-template-columns:1fr 44px 38px;}
  .d66-ai-text-row .d66-ai-text-select{grid-column:1 / -1;}
}


/* Druck66 0.8.9.3 — schwebender Shop-Assistent */
.d66-shop-assistant{
  position:fixed;
  right:22px;
  bottom:22px;
  z-index:99990;
  font-family:Inter,system-ui,-apple-system,"Segoe UI",Arial,sans-serif;
  color:#f4efe5;
}

.d66-shop-assistant__button{
  display:flex;
  align-items:center;
  gap:.55rem;
  border:1px solid rgba(32,215,207,.45);
  border-radius:999px;
  padding:.88rem 1.08rem;
  background:linear-gradient(135deg,#13d1c8,#0b9f9a);
  color:#041211;
  font-weight:950;
  letter-spacing:.015em;
  box-shadow:0 16px 42px rgba(0,0,0,.46),0 0 28px rgba(32,215,207,.24);
  cursor:pointer;
}

.d66-shop-assistant__spark{
  width:25px;
  height:25px;
  display:grid;
  place-items:center;
  border-radius:50%;
  background:rgba(0,0,0,.18);
  color:#fff8e8;
}

.d66-shop-assistant__panel{
  position:absolute;
  right:0;
  bottom:calc(100% + 14px);
  width:min(390px,calc(100vw - 32px));
  overflow:hidden;
  border:1px solid rgba(255,255,255,.14);
  border-radius:18px;
  background:
    radial-gradient(circle at 100% 0%,rgba(32,215,207,.16),transparent 15rem),
    linear-gradient(180deg,rgba(23,27,28,.98),rgba(8,10,11,.98));
  box-shadow:0 24px 70px rgba(0,0,0,.62);
  backdrop-filter:blur(14px);
}

.d66-shop-assistant__header{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:1rem;
  padding:1rem 1rem .9rem;
  border-bottom:1px solid rgba(255,255,255,.10);
}

.d66-shop-assistant__header strong{
  display:block;
  font-size:1rem;
  color:#fff8e8;
}

.d66-shop-assistant__header small{
  display:block;
  margin-top:.1rem;
  color:#20d7cf;
  font-size:.74rem;
  text-transform:uppercase;
  letter-spacing:.09em;
  font-weight:800;
}

.d66-shop-assistant__header button{
  width:34px;
  height:34px;
  border:1px solid rgba(255,255,255,.16);
  border-radius:50%;
  background:rgba(255,255,255,.05);
  color:#fff;
  cursor:pointer;
  font-size:1.25rem;
  line-height:1;
}

.d66-shop-assistant__messages{
  display:flex;
  flex-direction:column;
  gap:.62rem;
  max-height:310px;
  overflow:auto;
  padding:1rem;
  scrollbar-width:thin;
}

.d66-shop-assistant__msg{
  width:fit-content;
  max-width:88%;
  padding:.72rem .82rem;
  border-radius:14px;
  font-size:.92rem;
  line-height:1.42;
  white-space:pre-wrap;
}

.d66-shop-assistant__msg--bot{
  background:rgba(255,255,255,.075);
  border:1px solid rgba(255,255,255,.09);
  color:#f4efe5;
  border-bottom-left-radius:5px;
}

.d66-shop-assistant__msg--user{
  align-self:flex-end;
  background:rgba(32,215,207,.16);
  border:1px solid rgba(32,215,207,.28);
  color:#eaffff;
  border-bottom-right-radius:5px;
}

.d66-shop-assistant__chips{
  display:flex;
  flex-wrap:wrap;
  gap:.45rem;
  padding:0 1rem .85rem;
}

.d66-shop-assistant__chips button{
  border:1px solid rgba(32,215,207,.22);
  border-radius:999px;
  background:rgba(7,20,22,.72);
  color:#dffefe;
  padding:.45rem .62rem;
  font-size:.78rem;
  font-weight:800;
  cursor:pointer;
}

.d66-shop-assistant__form{
  display:grid;
  grid-template-columns:1fr auto;
  gap:.55rem;
  padding:.9rem 1rem 1rem;
  border-top:1px solid rgba(255,255,255,.10);
}

.d66-shop-assistant__form input{
  width:100%;
  border:1px solid rgba(255,255,255,.12);
  border-radius:12px;
  background:#090d0f;
  color:#fff;
  padding:.78rem .82rem;
  outline:none;
}

.d66-shop-assistant__form input:focus{
  border-color:rgba(32,215,207,.55);
  box-shadow:0 0 0 3px rgba(32,215,207,.10);
}

.d66-shop-assistant__form button{
  border:0;
  border-radius:12px;
  background:#20d7cf;
  color:#031313;
  font-weight:950;
  padding:0 .9rem;
  cursor:pointer;
}

.d66-shop-assistant.is-busy .d66-shop-assistant__form button{
  opacity:.65;
  pointer-events:none;
}

@media (max-width:760px){
  .d66-shop-assistant{
    right:14px;
    bottom:14px;
  }

  .d66-shop-assistant__button{
    padding:.76rem .92rem;
    font-size:.9rem;
  }

  .d66-shop-assistant__panel{
    width:calc(100vw - 28px);
  }
}


/* Druck66 0.8.9.4 — Spracheingabe im Shop-Assistenten */
.d66-shop-assistant__form{
  grid-template-columns:auto 1fr auto;
}

.d66-shop-assistant__voice{
  width:42px;
  min-width:42px;
  border:1px solid rgba(255,255,255,.14) !important;
  border-radius:12px !important;
  background:rgba(255,255,255,.07) !important;
  color:#fff !important;
  font-size:1rem;
  padding:0 !important;
  cursor:pointer;
}

.d66-shop-assistant__voice:hover{
  border-color:rgba(32,215,207,.48) !important;
  box-shadow:0 0 0 3px rgba(32,215,207,.09);
}

.d66-shop-assistant__voice.is-listening{
  background:linear-gradient(135deg,#20d7cf,#0aaeb0) !important;
  color:#031313 !important;
  box-shadow:0 0 0 4px rgba(32,215,207,.15),0 0 26px rgba(32,215,207,.35);
  animation:d66AssistantPulse 1.1s ease-in-out infinite;
}

@keyframes d66AssistantPulse{
  0%,100%{transform:scale(1)}
  50%{transform:scale(1.06)}
}

.d66-shop-assistant__voice[hidden]{
  display:none !important;
}

@media (max-width:420px){
  .d66-shop-assistant__form{
    grid-template-columns:auto 1fr;
  }

  .d66-shop-assistant__form button[type="submit"]{
    grid-column:1 / -1;
    min-height:42px;
  }
}


/* Druck66 0.8.9.5 — Voice Button Variante 1: Premium Neon-Kreis statt Emoji */
.d66-shop-assistant__voice{
  position:relative;
  width:42px;
  min-width:42px;
  height:42px;
  display:grid !important;
  place-items:center !important;
  border:1px solid rgba(32,215,207,.42) !important;
  border-radius:999px !important;
  background:
    radial-gradient(circle at 50% 44%,rgba(32,215,207,.20),rgba(32,215,207,.05) 44%,rgba(0,0,0,.32) 72%),
    linear-gradient(180deg,rgba(255,255,255,.08),rgba(255,255,255,.02)) !important;
  color:transparent !important;
  padding:0 !important;
  cursor:pointer;
  box-shadow:
    inset 0 0 0 1px rgba(255,255,255,.06),
    0 0 0 3px rgba(32,215,207,.06),
    0 10px 24px rgba(0,0,0,.34),
    0 0 22px rgba(32,215,207,.12);
  overflow:visible;
}

.d66-shop-assistant__voice::before{
  content:"";
  position:absolute;
  inset:7px;
  border-radius:50%;
  border:1px solid rgba(32,215,207,.55);
  box-shadow:inset 0 0 10px rgba(32,215,207,.18);
}

.d66-shop-assistant__voice-dot{
  width:12px;
  height:12px;
  border-radius:50%;
  background:#20d7cf;
  box-shadow:
    0 0 0 4px rgba(32,215,207,.10),
    0 0 18px rgba(32,215,207,.76),
    0 0 34px rgba(32,215,207,.28);
}

.d66-shop-assistant__voice:hover{
  border-color:rgba(32,215,207,.74) !important;
  box-shadow:
    inset 0 0 0 1px rgba(255,255,255,.08),
    0 0 0 4px rgba(32,215,207,.10),
    0 12px 28px rgba(0,0,0,.38),
    0 0 30px rgba(32,215,207,.24);
}

.d66-shop-assistant__voice.is-listening{
  background:
    radial-gradient(circle at 50% 44%,rgba(32,215,207,.46),rgba(32,215,207,.16) 46%,rgba(0,0,0,.30) 74%),
    linear-gradient(180deg,rgba(255,255,255,.11),rgba(255,255,255,.03)) !important;
  border-color:rgba(32,215,207,.92) !important;
  animation:d66AssistantVoiceGlow 1.15s ease-in-out infinite;
}

.d66-shop-assistant__voice.is-listening::after{
  content:"";
  position:absolute;
  inset:-6px;
  border-radius:50%;
  border:1px solid rgba(32,215,207,.42);
  animation:d66AssistantVoiceRing 1.15s ease-out infinite;
}

.d66-shop-assistant__voice.is-listening .d66-shop-assistant__voice-dot{
  background:#eaffff;
  box-shadow:
    0 0 0 5px rgba(32,215,207,.18),
    0 0 20px rgba(234,255,255,.95),
    0 0 42px rgba(32,215,207,.54);
}

@keyframes d66AssistantVoiceGlow{
  0%,100%{transform:scale(1)}
  50%{transform:scale(1.045)}
}

@keyframes d66AssistantVoiceRing{
  0%{opacity:.75;transform:scale(.88)}
  100%{opacity:0;transform:scale(1.25)}
}

/* Druck66 1.0.1: Pflicht-Bestätigung vor kostenpflichtiger Bildgenerierung */
.d66-ai-confirm-box{
  border:1px solid rgba(29,205,201,.35);
  background:linear-gradient(180deg,rgba(29,205,201,.10),rgba(255,255,255,.04));
}
.d66-ai-confirm-actions{
  display:flex;
  flex-wrap:wrap;
  gap:10px;
  margin-top:14px;
}
.d66-ai-confirm-actions button{
  border:1px solid rgba(255,255,255,.12);
  border-radius:10px;
  padding:10px 14px;
  font-weight:800;
  cursor:pointer;
}
.d66-ai-confirm-create{
  background:linear-gradient(135deg,#16d6d2,#12a9a6);
  color:#061515;
}
.d66-ai-confirm-change{
  background:#111827;
  color:#fff;
}


/* Druck66 1.0.3 — Startbox linksbündig, Mikrofon nur als Icon neben Senden, Modus-1-Button klarer */
.d66-ai-chat{align-content:start;}
.d66-ai-message-bot.d66-ai-welcome-message,
.d66-ai-chat > .d66-ai-message-bot:first-child{
  margin-left:0!important;
  margin-right:auto!important;
  text-align:left!important;
  max-width:min(100%, 720px)!important;
  padding:1rem 1.15rem!important;
  line-height:1.55!important;
}
.d66-ai-message-bot.d66-ai-welcome-message strong,
.d66-ai-chat > .d66-ai-message-bot:first-child strong{
  display:inline-block;
  margin-bottom:.2rem;
  color:#fff7e8;
  font-size:1.02rem;
}
.d66-ai-form{
  grid-template-columns:minmax(0,1fr) 3.7rem auto!important;
  align-items:stretch!important;
  gap:.65rem!important;
}
.d66-ai-input-wrap{position:relative!important;display:block!important;width:100%!important;}
.d66-ai-input-wrap textarea{
  min-height:74px!important;
  padding:.82rem .9rem!important;
  line-height:1.45!important;
}
.d66-ai-voice-button{
  position:static!important;
  width:3.7rem!important;
  min-width:3.7rem!important;
  height:auto!important;
  min-height:100%!important;
  padding:0!important;
  border-radius:.55rem!important;
  border:1px solid rgba(32,215,207,.70)!important;
  background:rgba(4,14,18,.82)!important;
  color:var(--d66-ai-accent)!important;
  display:inline-flex!important;
  align-items:center!important;
  justify-content:center!important;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.07),0 .35rem .95rem rgba(0,0,0,.22)!important;
}
.d66-ai-voice-button:hover{
  background:rgba(9,28,32,.96)!important;
  border-color:rgba(32,215,207,.95)!important;
  transform:translateY(-1px);
}
.d66-ai-voice-icon{width:1.25rem!important;height:1.25rem!important;color:currentColor!important;}
.d66-ai-voice-text{display:none!important;}
.d66-ai-form button[type=submit]{
  min-width:6.2rem;
  min-height:100%;
  border-radius:.55rem!important;
}
.d66-ai-generate-button{
  min-height:3rem;
  letter-spacing:.01em;
}
.d66-ai-generate-button:not(:disabled)::before{content:'✦ ';font-weight:900;}
@media(max-width:640px){
  .d66-ai-form{grid-template-columns:minmax(0,1fr) 3.1rem!important;gap:.5rem!important;}
  .d66-ai-form button[type=submit]{grid-column:1 / -1;min-height:2.75rem;width:100%;}
  .d66-ai-voice-button{width:3.1rem!important;min-width:3.1rem!important;min-height:74px!important;}
}


/* Druck66 1.0.4 — Begrüßungsbox sauber formatiert */
.d66-ai-chat{
  display:block !important;
  min-height:245px !important;
  padding:1rem !important;
}
.d66-ai-chat .d66-ai-message{
  box-sizing:border-box !important;
  margin-bottom:.75rem !important;
}
.d66-ai-chat .d66-ai-message:last-child{
  margin-bottom:0 !important;
}
.d66-ai-message-bot.d66-ai-welcome-message{
  display:block !important;
  width:100% !important;
  max-width:100% !important;
  margin:0 0 .75rem 0 !important;
  padding:1rem 1.1rem !important;
  text-align:left !important;
  white-space:normal !important;
  line-height:1.48 !important;
  letter-spacing:0 !important;
  word-spacing:normal !important;
}
.d66-ai-message-bot.d66-ai-welcome-message strong{
  display:block !important;
  margin:0 0 .42rem 0 !important;
  padding:0 !important;
  text-align:left !important;
  font-size:1rem !important;
  line-height:1.3 !important;
  color:#fff7e8 !important;
}
.d66-ai-message-bot.d66-ai-welcome-message span{
  display:block !important;
  margin:0 !important;
  padding:0 !important;
  max-width:780px !important;
  text-align:left !important;
  font-size:.94rem !important;
  line-height:1.5 !important;
  color:#f4efe5 !important;
}
.d66-ai-message-bot.d66-ai-welcome-message br{
  display:none !important;
}
.d66-ai-form{
  grid-template-columns:minmax(0,1fr) 3.55rem 6.3rem !important;
}
.d66-ai-voice-button,
.d66-ai-form button[type=submit]{
  height:100% !important;
  min-height:74px !important;
}
@media(max-width:640px){
  .d66-ai-message-bot.d66-ai-welcome-message{padding:.9rem !important;}
  .d66-ai-form{grid-template-columns:minmax(0,1fr) 3.1rem !important;}
}
.d66-ai-production-note,.d66-ai-preview-note{margin-top:.75rem;padding:.78rem .9rem;border:1px solid rgba(32,215,207,.28);background:rgba(32,215,207,.10);border-radius:8px;color:var(--d66-ai-text);line-height:1.42}.d66-ai-production-note strong,.d66-ai-preview-note strong{display:block;color:#f2e8d5;margin-bottom:.25rem}.d66-ai-production-note span,.d66-ai-preview-note span{display:block;color:var(--d66-ai-muted);font-size:.9rem}.d66-ai-preview-note{margin:.35rem 0 .75rem;background:rgba(255,255,255,.06)}
/* Druck66 AI Configurator 1.0.11 — Layout-Cleanup: klare Logik ohne Funktionsumbau */
.d66-ai-layout-clean{
  width:min(1380px, calc(100vw - 48px)) !important;
  max-width:1380px !important;
  grid-template-columns:minmax(0, .98fr) minmax(430px, .72fr) !important;
  gap:1.25rem !important;
  align-items:start !important;
}

.d66-ai-layout-clean .d66-ai-card,
.d66-ai-layout-clean .d66-ai-summary{
  border-radius:18px !important;
  padding:1.25rem !important;
  border:1px solid rgba(255,255,255,.12) !important;
  background:linear-gradient(180deg,rgba(255,255,255,.075),rgba(255,255,255,.032)),var(--d66-ai-panel) !important;
}

.d66-ai-layout-clean .d66-ai-main-title,
.d66-ai-layout-clean .d66-ai-preview-header{
  margin-bottom:1rem !important;
}

.d66-ai-layout-clean .d66-ai-main-title h2,
.d66-ai-layout-clean .d66-ai-preview-header h3{
  font-size:clamp(1.35rem,2vw,2rem) !important;
  margin:.25rem 0 .25rem !important;
}

.d66-ai-layout-clean .d66-ai-main-title p{
  margin:0 !important;
  color:var(--d66-ai-muted) !important;
}

.d66-ai-clean-steps{
  display:grid !important;
  gap:.85rem !important;
}

.d66-ai-clean-step{
  border:1px solid rgba(255,255,255,.105) !important;
  border-radius:15px !important;
  padding:1rem !important;
  background:rgba(0,0,0,.18) !important;
  box-shadow:none !important;
}

.d66-ai-step-head{
  display:flex !important;
  align-items:flex-start !important;
  gap:.78rem !important;
  margin-bottom:.78rem !important;
}

.d66-ai-step-head > span{
  width:2rem !important;
  height:2rem !important;
  flex:0 0 2rem !important;
  display:grid !important;
  place-items:center !important;
  border-radius:999px !important;
  background:linear-gradient(180deg,var(--d66-ai-accent),#0aaeb0) !important;
  color:#031313 !important;
  font-weight:900 !important;
}

.d66-ai-step-head h3{
  margin:0 0 .15rem !important;
  color:#f2e8d5 !important;
  font-size:1rem !important;
}

.d66-ai-step-head p{
  margin:0 !important;
  color:var(--d66-ai-muted) !important;
  font-size:.88rem !important;
  line-height:1.35 !important;
}

.d66-ai-layout-clean .d66-ai-config-panel{
  border:0 !important;
  background:transparent !important;
  padding:0 !important;
  margin:0 !important;
  box-shadow:none !important;
}

.d66-ai-layout-clean .d66-ai-media-panel > h3,
.d66-ai-layout-clean .d66-ai-text-panel > h3,
.d66-ai-layout-clean .d66-ai-mug-config > h3{
  display:none !important;
}

.d66-ai-layout-clean .d66-ai-products{
  margin:0 !important;
  gap:.55rem !important;
}

.d66-ai-layout-clean .d66-ai-products button,
.d66-ai-layout-clean .d66-ai-form button,
.d66-ai-layout-clean .d66-ai-text-controls button,
.d66-ai-layout-clean .d66-ai-design-actions button,
.d66-ai-layout-clean .d66-ai-variant-presets button,
.d66-ai-layout-clean .d66-ai-variation-box button,
.d66-ai-layout-clean .d66-ai-cart-button{
  border-radius:12px !important;
}

.d66-ai-layout-clean .d66-ai-upload-drop{
  border-radius:14px !important;
  padding:1rem !important;
  background:rgba(255,255,255,.045) !important;
  border:1px dashed rgba(32,215,207,.38) !important;
}

.d66-ai-layout-clean .d66-ai-text-controls{
  display:grid !important;
  grid-template-columns:minmax(140px,1fr) 54px minmax(140px,.7fr) auto !important;
  gap:.55rem !important;
  align-items:center !important;
}

.d66-ai-layout-clean .d66-ai-text-controls input[type="text"],
.d66-ai-layout-clean .d66-ai-text-controls select,
.d66-ai-layout-clean .d66-ai-form textarea,
.d66-ai-layout-clean .d66-ai-variation-box textarea,
.d66-ai-layout-clean .d66-ai-mug-config select{
  border-radius:12px !important;
}

.d66-ai-layout-clean .d66-ai-chat{
  min-height:112px !important;
  max-height:220px !important;
  border-radius:14px !important;
  padding:.85rem !important;
  background:rgba(0,0,0,.20) !important;
}

.d66-ai-layout-clean .d66-ai-message{
  max-width:100% !important;
}

.d66-ai-layout-clean .d66-ai-form{
  margin-top:.65rem !important;
  grid-template-columns:1fr auto auto !important;
}

.d66-ai-layout-clean .d66-ai-design-actions{
  display:flex !important;
  gap:.55rem !important;
  flex-wrap:wrap !important;
  margin-top:.65rem !important;
}

.d66-ai-layout-clean .d66-ai-design-actions button{
  flex:1 1 180px !important;
}

.d66-ai-layout-clean .d66-ai-summary{
  position:sticky !important;
  top:1rem !important;
}

.d66-ai-layout-clean .d66-ai-3d-stage{
  margin-top:.25rem !important;
  border-radius:18px !important;
  overflow:hidden !important;
}

.d66-ai-layout-clean .d66-ai-preview-note{
  margin:.85rem 0 !important;
  border-radius:14px !important;
  padding:.85rem .95rem !important;
  background:rgba(32,215,207,.08) !important;
  border:1px solid rgba(32,215,207,.20) !important;
}

.d66-ai-layout-clean .d66-ai-preview{
  min-height:0 !important;
  padding:.55rem !important;
  border-radius:14px !important;
}

.d66-ai-layout-clean .d66-ai-preview:has(.d66-ai-preview-placeholder){
  display:none !important;
}

.d66-ai-layout-clean .d66-ai-art-editor,
.d66-ai-layout-clean .d66-ai-wrap-preview,
.d66-ai-layout-clean .d66-ai-variants-wrap,
.d66-ai-layout-clean .d66-ai-order-summary{
  border-radius:15px !important;
}

.d66-ai-layout-clean .d66-ai-variants-wrap{
  margin-top:.9rem !important;
  padding-top:.9rem !important;
}

.d66-ai-section-title-row{
  display:flex !important;
  align-items:baseline !important;
  justify-content:space-between !important;
  gap:1rem !important;
  margin-bottom:.65rem !important;
}

.d66-ai-section-title-row h3{
  margin:0 !important;
}

.d66-ai-section-title-row small{
  color:var(--d66-ai-muted) !important;
  text-transform:uppercase !important;
  letter-spacing:.08em !important;
  font-weight:900 !important;
}

.d66-ai-layout-clean .d66-ai-cart-form{
  margin-top:1rem !important;
  position:relative !important;
  z-index:5 !important;
}

.d66-ai-layout-clean .d66-ai-cart-button{
  width:100% !important;
  padding:1rem 1.1rem !important;
  font-size:1rem !important;
}

.d66-ai-layout-clean .d66-ai-order-summary{
  margin-top:.8rem !important;
  padding:.75rem !important;
  background:rgba(0,0,0,.14) !important;
  border:1px solid rgba(255,255,255,.08) !important;
}

.d66-ai-layout-clean .d66-ai-order-summary h3{
  display:none !important;
}

.d66-ai-layout-clean .d66-ai-order-summary dl{
  margin:0 !important;
  grid-template-columns:auto 1fr !important;
  gap:.25rem .65rem !important;
}

.d66-ai-layout-clean .d66-ai-order-summary dt,
.d66-ai-layout-clean .d66-ai-order-summary dd{
  margin:0 !important;
  font-size:.82rem !important;
}

@media (max-width: 980px){
  .d66-ai-layout-clean{
    width:min(100%, calc(100vw - 22px)) !important;
    grid-template-columns:1fr !important;
    gap:.9rem !important;
    margin:1rem auto !important;
  }

  .d66-ai-layout-clean .d66-ai-preview-column{
    order:-1 !important;
    position:relative !important;
    top:auto !important;
  }

  .d66-ai-layout-clean .d66-ai-card,
  .d66-ai-layout-clean .d66-ai-summary{
    padding:1rem !important;
    border-radius:16px !important;
  }

  .d66-ai-layout-clean .d66-ai-3d-stage{
    min-height:300px !important;
  }

  .d66-ai-layout-clean .d66-ai-text-controls{
    grid-template-columns:1fr 52px !important;
  }

  .d66-ai-layout-clean .d66-ai-text-controls select,
  .d66-ai-layout-clean .d66-ai-text-controls button{
    grid-column:1 / -1 !important;
  }

  .d66-ai-layout-clean .d66-ai-form{
    grid-template-columns:1fr !important;
  }

  .d66-ai-layout-clean .d66-ai-variants{
    grid-template-columns:repeat(2,minmax(0,1fr)) !important;
  }
}

@media (max-width: 520px){
  .d66-ai-layout-clean{
    width:calc(100vw - 12px) !important;
  }

  .d66-ai-layout-clean .d66-ai-card,
  .d66-ai-layout-clean .d66-ai-summary,
  .d66-ai-clean-step{
    padding:.82rem !important;
  }

  .d66-ai-step-head{
    gap:.62rem !important;
  }

  .d66-ai-step-head > span{
    width:1.75rem !important;
    height:1.75rem !important;
    flex-basis:1.75rem !important;
  }

  .d66-ai-layout-clean .d66-ai-products{
    display:grid !important;
    grid-template-columns:1fr 1fr !important;
  }

  .d66-ai-layout-clean .d66-ai-variant-presets{
    grid-template-columns:1fr 1fr !important;
  }
}


/* Druck66 AI Configurator 1.0.13 — Mobile Reihenfolge korrigiert
   Mobil/Tablet: erst Gestaltung, dann Vorschau. Desktop bleibt unverändert. */
@media (max-width: 980px){
  .d66-ai-layout-clean{
    display:grid !important;
    grid-template-columns:1fr !important;
  }

  .d66-ai-layout-clean .d66-ai-design-column{
    order:1 !important;
  }

  .d66-ai-layout-clean .d66-ai-preview-column{
    order:2 !important;
    position:relative !important;
    top:auto !important;
  }
}