:root{
  /* Brand */
  --primary:#4f46e5;
  --primary-dark:#3730a3;
  --accent:#d4af37;

  /* Surfaces */
  --bg:#f7f8fb;
  --bg-elev:#ffffff;
  --surface:#f3f4f6;
  --surface-2:#e5e7eb;

  /* Text */
  --text:#1f2937;
  --muted:#6b7280;

  /* Semantic */
  --primary-50:#eef2ff; --primary-100:#e0e7ff;
  --success:#10b981; --success-ink:#064e3b;
  --warn:#f59e0b;   --warn-ink:#78350f;
  --error:#ef4444;  --error-ink:#7f1d1d;

  /* On-colors (Text auf Flächen) */
  --on-primary:#ffffff;
  --on-elev:#111827;

  /* Radii */
  --radius-xl:16px;
  --radius-lg:14px;
  --radius-md:12px;
  --radius-pill:9999px;

  /* Shadows */
  --shadow-1:0 1px 2px rgba(0,0,0,.06);
  --shadow-2:0 4px 12px rgba(0,0,0,.08);
  --shadow-3:0 10px 20px rgba(0,0,0,.12);

  /* Focus */
  --focus-ring:0 0 0 3px rgba(79,70,229,.18);

  /* Scales */
  --fs-xs:12px; --fs-sm:14px; --fs-md:16px; --fs-lg:20px; --fs-xl:24px;
  --space-1:4px; --space-2:8px; --space-3:12px; --space-4:16px; --space-5:24px; --space-6:32px;

  /* Motion */
  --dur-1:120ms; --dur-2:180ms; --ease:cubic-bezier(.2,.6,.2,1);
}
/* ==== Print constants (einfügen NACH :root) ==== */
:root{
  /* 1mm in CSS px (96dpi Browser) */
  --mm: 3.7795275591px;

  /* Kartengröße in mm (sichtbar), Bleed je Seite in mm */
  --card-w-mm: 85;     /* Breite ohne Anschnitt */
  --card-h-mm: 55;     /* Höhe  ohne Anschnitt */
  --bleed-mm:   3;     /* pro Seite */

  /* Abgeleitete Layout-Maße (Preview inkl. Bleed!) */
  --card-w: calc((var(--card-w-mm) + 2*var(--bleed-mm)) * var(--mm));
  --card-h: calc((var(--card-h-mm) + 2*var(--bleed-mm)) * var(--mm));
}
:root{
  /* Druck-Geometrie (für Export) */
  --dpi: 300;
  --px-per-mm: calc(var(--dpi) / 25.4);
  /* sichtbare 85x55 + beidseitig 3mm Bleed = 91 x 61 mm */
  --card-w-px: calc((var(--card-w-mm) + 2*var(--bleed-mm)) * var(--px-per-mm));
  --card-h-px: calc((var(--card-h-mm) + 2*var(--bleed-mm)) * var(--px-per-mm));
}

/* ---------------- Global ---------------- */
*,
*::before,
*::after { box-sizing: border-box; }

html, body { height: 100%; }

body{
  margin: 0;
  min-height: 100dvh;
  padding: 20px;
  color: var(--text);
  background-color: var(--bg);
  /* dezente Lichtflecken + Fallback */
  background-image:
    radial-gradient(1200px 800px at 10% -10%, #ffffff 0%, rgba(255,255,255,0) 60%),
    radial-gradient(900px 700px at 100% 0%, #eef2ff 0%, rgba(238,242,255,0) 50%);
  font-family: Inter, system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif;
  font-size: var(--fs-md);
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
  color-scheme: light;
  overscroll-behavior-y: contain;
}

/* Respect for reduced motion */
@media (prefers-reduced-motion: reduce){
  * { animation: none !important; transition: none !important; }
  body { scroll-behavior: auto; }
}

/* Focus sichtbar & konsistent */
:where(button, input, select, textarea, [role="tab"], .tpl-card):focus-visible{
  outline: none;
  box-shadow: var(--focus-ring);
}

/* Disabled-Muster für alles Klickbare */
:where(button, .tpl-card, .theme-buttons button)[disabled],
:where(button, .tpl-card, .theme-buttons button).is-disabled{
  opacity:.55;
  cursor:not-allowed;
  filter: grayscale(.25);
}

/* ---------------- Container Layout ---------------- */
.designer-container {
  display: grid;
  max-width: 1200px;
  margin: 0 auto;
  gap: 24px;
}

/* Desktop: Canvas links, Sidebar rechts */
@media (min-width: 1024px){
  .designer-container {
    grid-template-columns: minmax(420px, 1fr) 420px;
    align-items: start;
  }
  .canvas-area { align-items: flex-start; }
  .sidebar{
    position: relative;       /* nicht sticky */
    max-height: none;         /* keine Limitierung */
    overflow: visible;        /* wächst einfach */
  }
}

/* Mobile: Sidebar als Bottom-Drawer */
@media (max-width: 1023px){
  .designer-container { display: block; }

  .sidebar{
    position: fixed;
    left: 0; right: 0; bottom: 0;
    border-radius: 20px 20px 0 0;
    box-shadow: var(--shadow-3);
    background: rgba(255,255,255,.92);
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    padding: 14px 16px calc(18px + env(safe-area-inset-bottom));
    max-height: 55vh;
    overflow: auto;
    margin: 0;
  }

  .sidebar::before{
    content: "";
    display: block;
    width: 46px; height: 5px;
    border-radius: 6px;
    background: #d1d5db;
    margin: 4px auto 10px;
  }

  /* Platz für den Drawer schaffen */
  body{ padding-bottom: calc(56vh + env(safe-area-inset-bottom)); }
}

/* ---------------- Canvas / Preview (druckecht) ---------------- */
.canvas-area{
  display:flex;
  flex-direction:column;
  align-items:center;
  gap:14px;
}

.tabs{
  display:flex;
  gap:10px;
  justify-content:center;
}
.tabs button{
  padding:10px 18px;
  border:1px solid var(--surface-2);
  border-radius:var(--radius-pill);
  background:#f3f4f6;
  color:#111827;
  font-weight:500;
  cursor:pointer;
  transition:transform .2s ease, box-shadow .2s ease, background .2s ease;
  box-shadow:var(--shadow-1);
}
.tabs button.active-tab{ background:#e5e7eb; }
.tabs button:hover{
  transform:translateY(-1px);
  box-shadow:0 3px 8px rgba(0,0,0,.08);
}

.preview-wrapper{
  position:sticky;
  top:10px;
  z-index:5;
  /* Platz immer exakt in Kartenhöhe reservieren */
  min-height: var(--card-h);
}

/* --- Preview Stage (mm-basiert) --- */
#preview-area{
  /* mm-Ableitungen */
  --bleed: calc(var(--bleed-mm) * var(--mm));
  --safe:  calc(4 * var(--mm));                /* 4 mm Sicherheitsabstand */
  --guide-w: calc(0.25 * var(--mm));           /* ~0.25 mm Linienbreite */
  --pad-mm: 4;                                 /* 4 mm Innenabstand */
  --radius-xl-mm: 3;                           /* 3 mm UI-Radius (nur Preview) */
  --grid-step-mm: 5;                           /* 5 mm Raster */

  position: relative;
  background:#fff;
  border-radius: calc(var(--radius-xl-mm) * var(--mm));
  box-shadow: var(--shadow-2);
  overflow: hidden;
  transition: box-shadow .3s, background .3s;

  /* feste Layout-Maße in mm (inkl. Anschnitt) für Preview */
  width:  var(--card-w);
  height: var(--card-h);

  margin: 0 auto;
  isolation: isolate;
}
#preview-area:hover{ box-shadow: var(--shadow-3); }

/* feines Grid im mm-Raster */
#preview-area::before{
  content:"";
  position:absolute;
  inset:0;
  background-image:
    linear-gradient(to right, rgba(0,0,0,.03) 1px, transparent 1px),
    linear-gradient(to bottom, rgba(0,0,0,.03) 1px, transparent 1px);
  background-size: calc(var(--grid-step-mm) * var(--mm)) calc(var(--grid-step-mm) * var(--mm));
  pointer-events:none;
  z-index:1;
}

/* Bleed & Safe-Area Overlays */
#preview-area.show-bleed::after{
  content:"";
  position:absolute;
  inset:calc(var(--bleed) * -1);
  outline:2px dashed rgba(220,38,38,.65);
  pointer-events:none;
  z-index:2;
  border-radius: calc(var(--radius-xl-mm) * var(--mm));
}
#preview-area.show-safe .safe-ring{
  content:"";
  position:absolute;
  inset:var(--safe);
  border:2px dashed rgba(16,185,129,.6);
  border-radius: calc(max(0px, var(--radius-xl-mm) * var(--mm) - 6px));
  pointer-events:none;
  z-index:2;
}

/* Leitlinien als Overlay */
#preview-area.show-guides::after{
  content:"";
  position:absolute;
  inset:0;
  pointer-events:none;
  z-index:999;
  background-image:
    linear-gradient(to right, rgba(0,0,0,.03) 1px, transparent 1px),
    linear-gradient(to bottom, rgba(0,0,0,.03) 1px, transparent 1px),
    linear-gradient(to right,
      transparent calc(50% - var(--guide-w)/2),
      rgba(37,99,235,.35) calc(50% - var(--guide-w)/2),
      rgba(37,99,235,.35) calc(50% + var(--guide-w)/2),
      transparent calc(50% + var(--guide-w)/2)
    ),
    linear-gradient(to bottom,
      transparent calc(50% - var(--guide-w)/2),
      rgba(37,99,235,.35) calc(50% - var(--guide-w)/2),
      rgba(37,99,235,.35) calc(50% + var(--guide-w)/2),
      transparent calc(50% + var(--guide-w)/2)
    );
  background-size:
    calc(var(--grid-step-mm) * var(--mm)) calc(var(--grid-step-mm) * var(--mm)),
    calc(var(--grid-step-mm) * var(--mm)) calc(var(--grid-step-mm) * var(--mm)),
    100% 100%,
    100% 100%;
  background-position:center;
}

/* === Export der Karte (#front / #back) === */
.card-preview.exporting{
  width:  var(--card-w-px) !important;
  height: var(--card-h-px) !important;

  position: static !important;
  inset: auto !important;
  display: block !important;

  padding: 0 !important;
  margin: 0 !important;
  border-radius: 0 !important;
  box-shadow: none !important;
  transform: none !important;
  background: var(--card-bg, #ffffff) !important;
}

/* UI-Elemente innerhalb der Karte ausblenden */
.card-preview.exporting .safe-ring,
.card-preview.exporting .qr-preview,
.card-preview.exporting .card-node .qr-handle,
.card-preview.exporting .card-node .qr-delete{
  display: none !important;
}

/* während des Snapshots keine Skalierung */
#preview-area.capturing{ transform:none !important; }

/* Wrapper beim Export: nur UI-Effekte aus */
#preview-area.exporting{
  box-shadow: none !important;
}
#preview-area.exporting::before,
#preview-area.exporting::after,
#preview-area.exporting .safe-ring,
#preview-area.exporting .qr-preview,
#preview-area.exporting .card-node .qr-handle,
#preview-area.exporting .card-node .qr-delete{
  display: none !important;
  
}


/* ---------------- Sidebar / Controls ---------------- */
.sidebar{
  background:var(--bg-elev);
  border-radius:var(--radius-xl);
  padding:20px;
  box-shadow:var(--shadow-2);
  transition:box-shadow .3s, background .3s;
}

/* Step-Card Look für bestehende Accordions (.dd) */
.dd{
  border-radius:var(--radius-lg);
  background:#fff;
  border:1px solid var(--surface-2);
  box-shadow:var(--shadow-1);
  margin:12px 0;
  overflow:hidden;
}
.dd summary{
  list-style:none;
  cursor:pointer;
  padding:14px 16px;
  background:linear-gradient(180deg, #f9fafb, #f1f5f9);
  border-bottom:1px solid var(--surface-2);
  font-weight:700;
  color:#0f172a;
  display:flex;
  align-items:center;
  gap:10px;
}
.dd summary::-webkit-details-marker{ display:none }
.dd summary::before{
  content:"";
  width:10px; height:10px;
  border-right:2px solid #6b7280;
  border-bottom:2px solid #6b7280;
  transform:rotate(-45deg);
  transition:transform .2s ease;
  margin-right:4px;
}
.dd[open] summary::before{ transform:rotate(45deg) }

/* optionaler Done-Status via data-state */
.dd[data-state="done"] summary{
  background:linear-gradient(180deg, #ecfdf5, #e6f7f0);
  color:#065f46;
}
.dd .dd-body{
  padding:14px 16px;
  background:#fff;
}

/* Inline-Hilfen / Microcopy */
.dd .hint,
.help,
.form-hint{
  display:block;
  font-size:12.5px;
  line-height:1.4;
  color:#6b7280;
  margin-top:6px;
}

/* Inputs */
input, textarea, select{
  width:100%;
  margin:10px 0;
  padding:12px 14px;
  background:#f9fafb;
  border:1px solid #d1d5db;
  border-radius:12px;
  font-size:15px;
  transition:border-color .2s ease, box-shadow .2s ease, background .2s ease;
}
input:focus, textarea:focus, select:focus{
  border-color:var(--primary);
  background:#fff;
  box-shadow:0 0 0 3px rgba(79,70,229,.12);
  outline:none;
}

/* Buttons – Hierarchie: primary / secondary / tertiary */
button, .theme-buttons button, .tpl-card{
  padding:12px 18px;
  border:1px solid var(--surface-2);
  border-radius:var(--radius-pill);
  background:#f3f4f6;
  color:#111827;
  font-weight:600;
  cursor:pointer;
  transition:transform .2s ease, box-shadow .2s ease, background .2s ease, color .2s ease;
  box-shadow:var(--shadow-1);
}
button:hover, .theme-buttons button:hover, .tpl-card:hover{
  transform:translateY(-1px);
  box-shadow:0 3px 10px rgba(0,0,0,.08);
}
button.primary{
  background:var(--primary);
  color:#fff;
  border-color:transparent;
}
button.primary:hover{ background:var(--primary-dark) }

button.secondary{
  background:#eef2ff;
  border-color:#e0e7ff;
  color:#1f2937;
}
button.tertiary{
  background:transparent;
  border-color:transparent;
  color:#374151;
  box-shadow:none;
}
button.tertiary:hover{
  background:#f3f4f6;
  box-shadow:var(--shadow-1);
}

/* Templates Grid */
#templates-grid{
  display:flex;
  flex-wrap:wrap;
  gap:10px;
  margin-top:8px;
}
.tpl-card{
  flex:1 1 120px;
  text-align:center;
  background:#eef2ff;
  border-color:#e0e7ff;
}
/* ---------------- Elemente auf der Karte ---------------- */
.card-text{
  position:absolute;
  cursor:move;
  padding:4px 6px;
  min-width:30px; min-height:20px;
  border:1px dashed transparent;
  background:transparent;
  user-select:none;
  transition:transform .15s ease, background .15s ease, border-color .15s ease;
}
.card-text.selected{
  border-color:var(--primary);
  background:rgba(79,70,229,.10);
  border-radius:8px;
  transform:scale(1.02);
}

/* QR */
.card-node[type="qr"], #qrcode{
  width:80px !important; height:80px !important;
  padding:4px;
  background:#fff;
  border:2px solid #e5e7eb;
  border-radius:12px;
  box-shadow:0 4px 8px rgba(0,0,0,.06);
  display:flex; align-items:center; justify-content:center;
  transition:box-shadow .2s ease;
}

/* Logos */
.card-text img{
  max-width:120px; max-height:80px; object-fit:contain;
  border-radius:12px;
  background:#fff;
  padding:6px;
  box-shadow:0 2px 6px rgba(0,0,0,.06);
  transition:transform .15s ease;
}
.card-text img:hover{ transform:translateY(-1px) }

/* ---------------- Themes ---------------- */
#preview-area.theme-modern{
  background:linear-gradient(135deg, #ffffff, #f3f4f6);
  border:2px solid #e5e7eb;
}
#preview-area.theme-elegant{
  background:linear-gradient(135deg, #1f2937, #111827);
  border:2px solid var(--accent);
  color:#f9fafb;
}
#preview-area.theme-minimal{
  background:#ffffff;
  border:1px solid #e5e7eb;
}

/* ---------------- Tweaks ---------------- */
.row{ display:flex; gap:10px; align-items:center }
.row > *{ flex:1 }

#textControls{
  margin-top:12px;
  padding:12px;
  background:#f9fafb;
  border:1px solid #e5e7eb;
  border-radius:12px;
}

/* Scrollbars Sidebar */
.sidebar::-webkit-scrollbar{ width:8px }
.sidebar::-webkit-scrollbar-track{ background:#f3f4f6; border-radius:4px }
.sidebar::-webkit-scrollbar-thumb{ background:#c4c4c4; border-radius:4px }
.sidebar::-webkit-scrollbar-thumb:hover{ background:var(--primary) }
@media (max-width:1023px){
  .sidebar{
    position: static;    /* nicht fixed */
    max-height: none;
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
    box-shadow: var(--shadow-2);
    margin-top: 12px;
  }

  body{ padding-bottom: 0 !important; }
  .preview-wrapper{ position: static; top:auto; }
}

/* ======================================================================
   ADD-ON: Zugängliche Formelemente, Inline-Validation & Touch-Targets
   - ohne HTML/JS-Änderungen, wirkt auf Controls in #textControls
====================================================================== */
#textControls label{ color:var(--muted); font-weight:600; }
#textControls input,
#textControls select,
#textControls textarea,
#textControls button{
  min-height:44px;            /* Touch-Targets ≥44px */
  padding:10px 12px;
  line-height:1.3;
  border-radius:10px;
  border:1px solid #e5e7eb;
  background:#fff;
  outline:0; box-shadow:none;
  transition:box-shadow .15s ease, border-color .15s ease, background .15s ease;
}
#textControls input:focus-visible,
#textControls select:focus-visible,
#textControls textarea:focus-visible,
#textControls button:focus-visible{
  /* Konstanter, AA-tauglicher Fokus-Ring */
  box-shadow:0 0 0 3px #3b82f6;
  border-color:#3b82f6;
}

/* Soft Inline-Validierung – erst nach Eingabe */
#textControls input:placeholder-shown{ border-color:#e5e7eb; }
#textControls input:not(:placeholder-shown):invalid{ border-color:#f59e0b; }
#textControls input:not(:placeholder-shown):valid{ border-color:#10b981; }

/* Dezent: Hinweistext, falls .hint direkt unter dem Feld existiert */
#textControls input:not(:placeholder-shown):invalid ~ .hint::before{
  content:"Bitte prüfen. ";
  color:#f59e0b; font-weight:600;
}

/* ======================================================================
   ADD-ON: Live-Badge „Aktuell: Name“ beim Selektieren eines Name-Elements
   - wirkt, wenn das Ziel auf der Karte als data-field="name" gekennzeichnet ist
   - kein JS nötig; Badge erscheint, wenn Element .selected ist
====================================================================== */
.card-text[data-field="name"].selected::after{
  content:"Aktuell: Name";
  margin-left:8px;
  font-size:.72rem;
  padding:.18rem .48rem;
  border-radius:999px;
  background:#eef2ff;
  color:#3730a3;
  vertical-align:middle;
}

/* ======================================================================
   ADD-ON: Typografie-Presets + Feintuning via Custom Props
   - ohne DOM-Änderungen: greift auf bekannte Rollen/Attribute
====================================================================== */
#preview-area{
  --fs-name: clamp(16px, 2.2vw, 22px);
  --fs-title: clamp(13px, 1.6vw, 16px);
  --fs-company: clamp(14px, 1.8vw, 18px);
}
.card-text[data-field="name"]{ font-size:var(--fs-name); font-weight:700; }
.card-text[data-field="title"]{ font-size:var(--fs-title); color:var(--muted); }
.card-text[data-field="company"]{ font-size:var(--fs-company); }

/* Optional: globale Preset-Wrapper, falls vorhanden */
.text-size-sm #preview-area{ --fs-name:18px; --fs-title:14px; --fs-company:15px; }
.text-size-lg #preview-area{ --fs-name:24px; --fs-title:18px; --fs-company:20px; }

/* ======================================================================
   ADD-ON: Ausrichtung – wenn ein Wrapper-Klasse gesetzt ist (kein JS nötig)
====================================================================== */
.align-left  .card-text[data-role="text-block"]{ text-align:left; }
.align-center .card-text[data-role="text-block"]{ text-align:center; }
.align-right .card-text[data-role="text-block"]{ text-align:right; }

/* Wenn Text direkt in .card-text steht */
.align-left  .card-text{ text-align:left; }
.align-center .card-text{ text-align:center; }
.align-right .card-text{ text-align:right; }

/* ======================================================================
   ADD-ON: Logo-Auto-Fit & „hell auf hell“-Mikro-Warnung (optional)
   - Auto-Fit ist bereits aktiv (object-fit:contain)
   - Mikro-Warnung erscheint, wenn img.is-light vorhanden ist
====================================================================== */
.card-text:has(img.is-light)::after{
  content:"Kontrast niedrig";
  position:absolute; top:-10px; right:-10px;
  font-size:.7rem;
  padding:.15rem .4rem;
  border-radius:999px;
  background:#ffffff;
  color:#111827;
  box-shadow:0 2px 6px rgba(0,0,0,.12);
  pointer-events:none;
}

/* ======================================================================
   ADD-ON: QR & interaktive Elemente – Fokus sichtbar (Keyboard)
====================================================================== */
.card-node[type="qr"]:focus-visible,
#qrcode:focus-visible{
  outline:0;
  box-shadow:0 0 0 3px #3b82f6, 0 4px 8px rgba(0,0,0,.10);
  border-color:#3b82f6;
  border-radius:12px;
}

/* ============ ORDER v2 – Karten-UI ============ */

/* Abschnitt */
.order-section{
  max-width: 1150px;
  margin: 28px auto 80px;
  padding: 0 6px;
  display: grid;
  gap: 22px;
}

/* H2 ohne farbigen Unterbalken */
.order-section > h2::after { display:none !important; }

/* 2 Spalten nur wenn #price-box befüllt ist */
@media (min-width:1024px){
  .order-section{ grid-template-columns: minmax(360px,460px) 1fr; }
  .order-section:has(#price-box:empty){ grid-template-columns: 1fr; }
}

/* Leere Preisbox vollständig ausblenden (entfernt den “Balken”) */
.order-section #price-box:empty{ display:none; }

/* Karten-Stil für Preis & Summary */
.order-section #price-box,
.order-section .order-summary{
  position: relative;
  background: var(--bg-elev);
  border: 1px solid var(--surface-2);
  border-radius: var(--radius-xl);
  padding: 18px 18px 20px;
  box-shadow: var(--shadow-2);
  overflow: hidden;
  isolation: isolate;
}

/* dezente Accentkante oben */
.order-section #price-box::before,
.order-section .order-summary::before{
  content:"";
  position:absolute; left:-1px; right:-1px; top:-1px; height:7px;
  background: linear-gradient(90deg, var(--primary), var(--accent));
  opacity:.14;
  pointer-events:none;
}

/* Zusammenfassungsliste */
.order-summary .order-list{
  list-style:none; margin:4px 0 0; padding:0;
  display:grid; gap:12px 18px;
  grid-template-columns: repeat(2, minmax(220px,1fr));
}
.order-summary .order-list li{
  background:#fff;
  border:1px solid var(--surface-2);
  border-radius: var(--radius-md);
  padding:12px 14px;
  box-shadow: var(--shadow-1);
}
.order-summary .order-list strong{
  display:block; margin-bottom:4px;
  font-size:.93rem; color:#0f172a;
}
.order-summary .order-list span{
  font-size:.93rem; color: var(--muted);
  line-height:1.5;
}

/* Infozeile (z. B. „änderst du hier“) */
.order-section .muted{
  color: var(--muted);
  font-size:.92rem;
  margin: 2px 2px 10px;
}
.order-section .muted a{
  color: var(--primary);
  text-decoration: underline;
  text-underline-offset: 3px;
}
.order-section .muted a:hover{ color: var(--primary-dark); }

/* Checkout-Button */
#btn-checkout{
  display:inline-flex; align-items:center; justify-content:center;
  width:100%;
  padding:14px 22px;
  border:0; border-radius: var(--radius-pill);
  background: linear-gradient(135deg, var(--primary), var(--primary-dark));
  color:#fff; font-weight:700;
  box-shadow: 0 12px 26px rgba(79,70,229,.25);
  transition: transform .15s ease, box-shadow .2s ease, filter .2s ease;
}
#btn-checkout:hover{
  transform: translateY(-1px);
  box-shadow: 0 16px 30px rgba(79,70,229,.32);
  filter: saturate(1.06);
}

/* Mobile: stapeln + Sticky-Button */
@media (max-width:1023px){
  .order-section{ grid-template-columns: 1fr; }
  .order-summary .order-list{ grid-template-columns: 1fr; }
  #btn-checkout{ position: sticky; bottom: 14px; z-index: 20; }
}
#preview-area.theme-elegant { box-shadow: 0 0 0 3px rgba(15,23,42,.15); }
#preview-area.theme-minimal { filter: saturate(0.9); }
#preview-area.theme-modern  { filter: none; }
/* ===========================
   Bestellung / Zusammenfassung (mobile-first)
=========================== */
.order-section{
  padding: max(20px, 3.5vw);
  padding-left: calc(max(20px, 3.5vw) + env(safe-area-inset-left, 0));
  padding-right: calc(max(20px, 3.5vw) + env(safe-area-inset-right, 0));
  background: transparent;
  color: #111827;
}

.order-grid{
  display: grid;
  grid-template-columns: 1fr;              /* mobile: 1 Spalte */
  gap: clamp(14px, 3.5vw, 24px);
  max-width: 1100px;
  margin: 0 auto;
}

.order-left{
  display: flex;
  flex-direction: column;
  gap: 14px;
}

/* Card-Optik (sanft) */
.order-left,
.order-right{
  background: #ffffff;
  border: 1px solid #e5e7eb;
  border-radius: 14px;
  padding: clamp(16px, 2.2vw, 22px);
  box-shadow: 0 1px 2px rgba(0,0,0,.04);
}
/* ===========================
   MOBILE POLISH für Auswahl/Summary
   - bessere Lesbarkeit
   - saubere Umbrüche bei langen Links
   - Floating Delete Button (FAB)
=========================== */

/* Grundlesbarkeit im Summary */
#order-summary{
  font-size: 15.5px;
  line-height: 1.55;
  display: grid;
  gap: 10px;
}

/* --- Links: umbrechen statt aus dem Screen zu laufen --- */
#order-summary a{
  color:#0e9f6e;
  text-decoration: underline;
  text-underline-offset: 2px;
  overflow-wrap:anywhere;       /* moderne Browser */
  word-break: break-word;       /* Fallback */
  line-break: anywhere;         /* iOS Safari */
}
#order-summary a:hover{ color:#047857; }

/* --- Wenn du eine Definition List nutzt (empfohlen) --- */
#order-summary dl{
  display: grid;
  grid-template-columns: auto 1fr;
  column-gap: 10px;
  row-gap: 8px;
  margin: 0;
}
#order-summary dt{
  margin: 0;
  color:#6b7280;
  white-space: nowrap;
  font-weight: 600;
}
#order-summary dd{
  margin: 0;
  font-weight: 600;
  color:#111827;
  min-width: 0;                 /* damit Umbrüche in Grid greifen */
}

/* --- Falls du UL/LI hast (alternativer Hook) --- */
#order-summary ul{
  list-style: none;
  padding: 0; margin: 0;
  display: grid; gap: 8px;
}
#order-summary li{
  display: grid;
  grid-template-columns: auto 1fr;
  column-gap: 10px;
  align-items: baseline;
}
#order-summary li b,
#order-summary li .summary-key{ color:#6b7280; font-weight:600; }
#order-summary li .summary-val{ font-weight:700; color:#111827; }

/* --- Oder generisches Row-Pattern (für JS-Renderer) --- */
#order-summary .summary-row{
  display: grid;
  grid-template-columns: auto 1fr;
  column-gap: 10px;
}
#order-summary .summary-key{ color:#6b7280; font-weight:600; }
#order-summary .summary-val{ font-weight:700; color:#111827; }

/* Trenner + Gruppenüberschriften (optional) */
#order-summary .summary-divider{
  height:1px; background:#e5e7eb; margin: 4px 0;
}
#order-summary .summary-group{
  font-weight:800; font-size:16px; margin: 6px 0 2px;
}

/* Headings in der rechten Karte enger setzen */
.order-right h2{ margin: 0 0 .5em; }
.order-right h3{ margin: .75em 0 .4em; }

/* ---------- Mobile spezifisch ---------- */
@media (max-width: 600px){
  /* Card-Padding etwas straffer */
  .order-left, .order-right{
    padding: 16px;
  }

  /* Platz unten für das FAB lassen, damit nichts überlappt */
  .order-section{
    padding-bottom: 110px; /* Platz für iOS Safari + FAB */
  }

  /* Knapper Spaltenabstand auf sehr kleinen Screens */
  #order-summary dl,
  #order-summary ul,
  #order-summary .summary-row{
    column-gap: 8px;
  }

  /* Keys schmaler, damit Werte mehr Platz haben */
  #order-summary dt,
  #order-summary li b,
  #order-summary .summary-key{
    font-size: 14px;
  }
}

/* ---------- Floating "Löschen"-Button (FAB) ---------- */
/* Entfernt den Button aus dem Content-Flow und parkt ihn sicher unten rechts. */
#btn-del{
  position: fixed !important;
  right: calc(14px + env(safe-area-inset-right, 0));
  bottom: calc(14px + env(safe-area-inset-bottom, 0));
  z-index: 1000;

  display: inline-flex;
  align-items: center;
  justify-content: center;

  min-width: 44px;              /* Fingerfreundlich */
  min-height: 44px;
  padding: 10px 14px;

  border: 1px solid transparent;
  border-radius: 999px;
  background: #ef4444;
  color: #fff;
  font-weight: 700;
  box-shadow: 0 6px 18px rgba(239,68,68,.28), 0 2px 6px rgba(0,0,0,.08);
  transition: transform .06s ease, box-shadow .15s ease, background-color .15s ease;
}
#btn-del:hover{ background:#dc2626; }
#btn-del:active{ transform: translateY(1px); }
#btn-del:focus-visible{
  outline: none;
  box-shadow: 0 0 0 4px rgba(239,68,68,.22), 0 6px 18px rgba(239,68,68,.28);
}

/* Dark-Mode: Karten bleiben hell (wie gewünscht) */
@media (prefers-color-scheme: dark){
  .order-left, .order-right{
    background:#ffffff !important;
    border-color:#e5e7eb !important;
    box-shadow: 0 1px 2px rgba(0,0,0,.04) !important;
  }
  #order-summary a{ color:#0e9f6e; }
}

/* ---------- Druckhinweise ---------- */
.print-notes{
  display: block;
  font-size: 16px;                 /* >=16px verhindert iOS-Input-Zoom */
  font-weight: 600;
  color: #1f2937;
}

.print-notes textarea{
  display: block;
  width: 100%;
  min-height: 160px;               /* mobile etwas höher für Touch */
  margin-top: 8px;
  padding: 14px;
  border: 1px solid #d1d5db;
  border-radius: 12px;
  background: #fff;
  color: #111827;
  font: inherit;
  line-height: 1.55;
  resize: vertical;
  box-shadow: 0 1px 2px rgba(0,0,0,0.03) inset;
  transition: border-color .2s ease, box-shadow .2s ease, background-color .2s ease;
  -webkit-tap-highlight-color: transparent;
}

.print-notes textarea::placeholder{ color:#9ca3af; }

.print-notes textarea:focus{
  outline: none;
  border-color: #10b981;
  box-shadow: 0 0 0 4px rgba(16,185,129,0.16);
  background-color: #fff;
}

/* Fokusrahmen auch beim Container (Zugänglichkeit) */
.print-notes:has(textarea:focus){
  outline: none;
  /* no-op: Selektor erzwingt Style-Context */
  filter: drop-shadow(0 0 0 rgba(0,0,0,0));
}

/* Hinweiszeile unter dem Feld */
.muted{
  margin-top: 6px;
  font-size: 14.5px;
  color: #6b7280;
}

.muted a{
  color: #0e9f6e;
  text-decoration: underline;
  text-underline-offset: 2px;
  transition: color .15s ease;
}
.muted a:hover{ color:#047857; }

/* ---------- Rechte Spalte: Preis & Zusammenfassung ---------- */
.order-right > * + *{                 /* saubere vertikale Rhythmik */
  margin-top: 14px;
}

#price-box{
  border: 1px dashed #e5e7eb;
  border-radius: 12px;
  padding: 12px;
}

#order-summary{
  display: grid;
  gap: 10px;
}

/* generische Summary-Liste (optional) */
.summary-list{
  display: grid;
  gap: 8px;
}
.summary-row{
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 10px;
  align-items: baseline;
}
.summary-key{
  color:#6b7280;
  font-size: 14.5px;
}
.summary-val{
  font-weight: 600;
  color:#111827;
}

/* Trennlinie (z. B. vor Gesamtpreis) */
.summary-divider{
  height: 1px;
  background: #e5e7eb;
  margin: 6px 0;
}

/* Checkout-Button (falls #btn-checkout) */
#btn-checkout{
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  width: 100%;
  padding: 14px 16px;
  border-radius: 12px;
  background: #10b981;
  color: #ffffff;
  font-weight: 700;
  border: 1px solid transparent;
  cursor: pointer;
  transition: transform .06s ease, box-shadow .15s ease, background-color .15s ease;
}
#btn-checkout:hover{ background:#059669; }
#btn-checkout:active{ transform: translateY(1px); }
#btn-checkout:focus-visible{
  outline: none;
  box-shadow: 0 0 0 4px rgba(16,185,129,0.18);
}

/* ---------- Desktop-/Tablet-Verbesserungen ---------- */
@media (min-width: 960px){
  .order-grid{
    grid-template-columns: 1.25fr 1fr;    /* links Inhalt, rechts Zusammenfassung */
    gap: clamp(16px, 2.5vw, 28px);
  }

  /* Sticky + Safari-Fix (min-height, overflow-anchor) */
  .order-right{
    position: sticky;
    top: 12px;
    min-height: 100px;
    overflow-anchor: none;
  }
}

/* ---------- Bewegungs-Reduktion ---------- */
@media (prefers-reduced-motion: reduce){
  .print-notes textarea,
  .muted a,
  #btn-checkout{
    transition: none;
  }
}

/* ---------- Dark-Mode: Karten hell lassen ---------- */
@media (prefers-color-scheme: dark){
  .order-left,
  .order-right{
    background:#ffffff !important;
    border-color:#e5e7eb !important;
    box-shadow: 0 1px 2px rgba(0,0,0,.04) !important;
  }
  .print-notes textarea{
    background:#ffffff !important;
    color:#111827 !important;
    border-color:#d1d5db !important;
  }
}

/* ===== QR: einheitliche Styles (#qrcode & card-node[type="qr"]) ===== */
.card-node[type="qr"], #qrcode, #qr-main{
  width:80px !important; height:80px !important;
  padding:4px;
  background:#fff;
  border:2px solid #e5e7eb;
  border-radius:12px;
  box-shadow:0 4px 8px rgba(0,0,0,.06);
  display:flex; align-items:center; justify-content:center;
  transition:box-shadow .2s ease;
}
.card-node[type="qr"]:focus-visible,
#qrcode:focus-visible,
#qr-main:focus-visible{
  outline:0;
  box-shadow:0 0 0 3px #3b82f6, 0 4px 8px rgba(0,0,0,.10);
  border-color:#3b82f6; border-radius:12px;
}

/* ===== Verhindert den "Phantom-Block" unten rechts ===== */
.qr-preview{ display:none; }           /* global ausblenden */
#preview-area .qr-preview.has-content{
  display:flex;                        /* nur zeigen, wenn JS Inhalt setzt */
  position:absolute; right:12px; bottom:12px;
  width:120px; height:120px;
  padding:4px; background:#fff;
  border:2px solid #e5e7eb; border-radius:12px;
  box-shadow:0 4px 8px rgba(0,0,0,.06);
}
#preview-area .qr-preview canvas,
#preview-area .qr-preview img{
  width:100% !important; height:100% !important;
}

/* Container relativ, damit Absolutpositionen in der Karte bleiben */
#preview-area{ position:relative; }

#btn-del {
  position: fixed;
  bottom: 20px;   /* Abstand von unten */
  right: 20px;    /* Abstand von rechts */
  padding: 10px 16px;
  background: #ef4444;
  color: #fff;
  border: none;
  border-radius: 8px;
  font-weight: 600;
  cursor: pointer;
  box-shadow: 0 4px 8px rgba(0,0,0,.15);
  transition: background .2s ease;
  z-index: 9999; /* über allem */
}

#btn-del:hover {
  background: #dc2626;
}
.order-right .card {
  background: #fff;
  border: 1px solid var(--surface-2, #e5e7eb);
  border-radius: var(--radius-lg, 12px);
  box-shadow: var(--shadow-1, 0 2px 6px rgba(0,0,0,0.05));
  padding: 16px;
  margin-bottom: 20px;
}

.order-right .card h3 {
  font-size: 1.1rem;
  font-weight: 600;
  margin-bottom: 12px;
}

.order-right .card .row {
  display: flex;
  justify-content: space-between;
  font-size: 0.95rem;
  margin-bottom: 6px;
}

.order-right .card .row .k {
  font-weight: 600;
  color: var(--text, #111);
}

.order-right .card .row .v {
  color: var(--text-muted, #555);
}
.delete-btn {
  background: #e63946;
  color: #fff;
  border: none;
  padding: 0.6em 1.2em;
  border-radius: 8px;
  font-size: 0.9rem;
  cursor: pointer;
  transition: background 0.2s ease;
}
.delete-btn:hover:not(:disabled) {
  background: #d62828;
}
.delete-btn:disabled {
  background: #ccc;
  cursor: not-allowed;
}
.designer-toolbar {
  position: absolute; /* z. B. rechts oben im Designer */
  top: 10px;
  right: 10px;
  z-index: 9999;
}
/* ===== Desktop-Layout: Checkout links, Auswahl rechts ===== */
@media (min-width: 1024px){

  /* Seitenhintergrund etwas wertiger (dezent) */
  body{
    background:
      radial-gradient(1200px 600px at 50% -200px, rgba(79,70,229,.06), transparent 60%),
      linear-gradient(#f8fafc, #f9fafb);
  }

  /* Haupt-Grid: linke Spalte fix, rechte flexibel */
  .order-grid{
    grid-template-columns: 420px minmax(520px, 1fr);
    gap: 28px;
    align-items: start;
  }

  /* Linke Karte (Checkout) – sticky, damit beim Scrollen „dranbleibt“ */
  .order-left{
    position: sticky;
    top: 24px;
    align-self: start;

    background: #fff;
    border: 1px solid #e5e7eb;
    border-radius: 16px;
    box-shadow: 0 10px 28px rgba(0,0,0,.08);
    padding: 22px;
  }

  /* Hinweis & Button in der linken Karte */
  .order-section .muted{
    margin-top: 2px;
    margin-bottom: 12px;
    color: #64748b;
  }
  #btn-checkout{
    width: 100%;
    border-radius: 999px;
    box-shadow: 0 16px 34px rgba(79,70,229,.28);
  }
  #btn-checkout:hover{
    transform: translateY(-2px);
    box-shadow: 0 22px 42px rgba(79,70,229,.34);
  }

  /* Rechte Karte (Deine Auswahl) – Premium Card */
  .order-right{
    background: #fff;
    border: 1px solid #e5e7eb;
    border-radius: 18px;
    box-shadow: 0 12px 30px rgba(0,0,0,.08);
    padding: 28px;
  }
  .order-right h2{
    font-size: 1.7rem;
    font-weight: 700;
    color: #0f172a;
    margin-bottom: 16px;
    border-bottom: 2px solid #eef2f7;
    padding-bottom: 8px;
  }

  /* Die innere „Digitale Karte“-Box noch etwas absetzen */
  .order-right .order-summary{
    background: #ffffff;
    border: 1px solid #e5e7eb;
    border-radius: 14px;
    box-shadow: 0 4px 16px rgba(0,0,0,.06);
    padding: 16px;
  }

  /* Label/Value-Look ohne HTML ändern */
  .order-right strong{
    display: inline-block;
    width: 160px;           /* Label-Spalte */
    color: #64748b;
    font-weight: 600;
    vertical-align: top;
  }
  .order-right span,
  .order-right p{ color:#111827; }

  /* Lange Links eleganter (gekürzt) */
  .order-right a{
    color:#2563eb;
    text-decoration:none;
    display:inline-block;
    max-width: 360px;
    overflow:hidden;
    text-overflow:ellipsis;
    white-space:nowrap;
    vertical-align:bottom;
  }
  .order-right a:hover{ text-decoration:underline; }

  /* Die untere Liste (Menge/Preis/Papier/…) als Subcard */
  .order-right ul{
    margin-top: 18px;
    background: #f8fafc;
    border: 1px solid #e5e7eb;
    border-radius: 12px;
    padding: 14px 18px;
    box-shadow: 0 2px 10px rgba(0,0,0,.04);
  }
  .order-right ul li{
    margin-bottom:.55rem;
    color:#374151;
  }
  .order-right ul li:last-child{ margin-bottom:0; }
}

/* Mobile bleibt wie gehabt */
/* Kartenfläche */
#preview-area {
  background: #fff; /* Standard: weiß/clean */
  border-radius: var(--radius-xl);
  box-shadow: var(--shadow-2);
  position: relative;
  overflow: hidden;
  transition: box-shadow 0.3s, background 0.3s;
}

/* Grid (Karo) nur bei Hover */
#preview-area::before {
  content: "";
  position: absolute;
  inset: 0;
  background-image:
    linear-gradient(to right, rgba(0,0,0,.05) 1px, transparent 1px),
    linear-gradient(to bottom, rgba(0,0,0,.05) 1px, transparent 1px);
  background-size: 20px 20px;
  opacity: 0;                 /* unsichtbar */
  transition: opacity 0.3s;   /* sanftes Ein-/Ausblenden */
}

#preview-area:hover::before {
  opacity: 1;                 /* Raster wird sichtbar */
}