/* =========================================================
   Digihelfer24 – Quick Builder UI
   Fixes:
   1) Entities/Labels optisch sauber (kein "komisch" spacing)
   2) Preview unten: klein in Steps, groß im letzten Step + Head
   ========================================================= */

/* ---------- Base ---------- */
.dhbe-app{
  font-family:system-ui,-apple-system,Segoe UI,Roboto,Arial,sans-serif;
  max-width:1200px;
  margin:0 auto;
  padding:16px;
  color:#e8eaed;
}

/* ---------- Head ---------- */
.dhbe-top{
  display:flex;
  align-items:center;
  gap:14px;
  margin-bottom:14px;
}
.dhbe-brand{
  font-weight:900;
  font-size:18px;
  color:#fff;
}

/* ---------- Search ---------- */
.dhbe-search-input{
  width:100%;
  padding:12px 14px;
  border-radius:14px;
  border:1px solid rgba(255,255,255,.14);
  background:rgba(255,255,255,.06);
  color:#fff;
}
.dhbe-search-input::placeholder{color:#9ca3af}

/* ---------- Pills ---------- */
.dhbe-pills{
  display:flex;
  gap:8px;
  flex-wrap:wrap;
  margin:12px 0 18px;
}
.dhbe-pill{
  padding:8px 14px;
  border-radius:999px;
  font-weight:900;
  cursor:pointer;
  background:rgba(255,255,255,.06);
  border:1px solid rgba(255,255,255,.14);
  color:#fff;
}
.dhbe-pill.is-active{
  background:#0056D2;
  border-color:#0056D2;
  box-shadow:0 0 0 3px rgba(0,86,210,.25);
}

/* ---------- Cards ---------- */
.dhbe-card{
  min-width:240px;
  max-width:280px;
  padding:16px;
  border-radius:18px;
  background:linear-gradient(180deg,rgba(255,255,255,.08),rgba(255,255,255,.03));
  border:1px solid rgba(255,255,255,.14);
  cursor:pointer;
  box-shadow:0 12px 28px rgba(0,0,0,.35);
  transition: transform .12s ease, border-color .12s ease, box-shadow .12s ease;
}
.dhbe-card:hover{
  border-color:#0056D2;
  transform:translateY(-2px);
  box-shadow:0 16px 34px rgba(0,0,0,.42);
}
.dhbe-card-title{
  font-size:16px;
  font-weight:950;
  color:#fff;
  margin-top:10px;
}

/* ---------- Modal Panel ---------- */
.dhbe-modal-panel{
  background:linear-gradient(180deg,#0e0e0e,#090909);
  border-radius:20px;
  border:1px solid rgba(255,255,255,.10);
  box-shadow:0 30px 80px rgba(0,0,0,.6);
}

/* ---------- Overlay Base ---------- */
.dhbe-overlay{
  background:#0b1220;
  color:#fff;
}

/* ---------- Stepper ---------- */
.dhbe-stepper{
  display:flex;
  gap:8px;
  flex-wrap:wrap;
  margin:8px 0 16px;
}
.dhbe-step{
  padding:8px 14px;
  border-radius:999px;
  font-size:13px;
  font-weight:900;
  background:rgba(255,255,255,.06);
  border:1px solid rgba(255,255,255,.14);
  color:#9ca3af;
}
.dhbe-step.is-active{
  background:linear-gradient(180deg,rgba(0,86,210,.28),rgba(0,86,210,.12));
  border-color:#0056D2;
  color:#fff;
  box-shadow:0 0 0 3px rgba(0,86,210,.30);
}

/* ---------- Form ---------- */
.dhbe-field{ margin:16px 0; }

.dhbe-label{
  font-weight:950;
  font-size:14px;
  margin-bottom:6px;
  color:#fff;
  display:flex;
  justify-content:space-between;
  gap:10px;
}
.dhbe-err{
  color:#ff6b6b;
  font-size:12px;
  font-weight:900;
}

.dhbe-input,
.dhbe-textarea,
.dhbe-select{
  width:100%;
  padding:12px 14px;
  border-radius:14px;
  border:1px solid rgba(255,255,255,.16);
  background:rgba(255,255,255,.06);
  color:#fff;
}
.dhbe-input:focus,
.dhbe-textarea:focus,
.dhbe-select:focus{
  outline:none;
  border-color:#0056D2;
  box-shadow:0 0 0 3px rgba(0,86,210,.25);
}
.dhbe-textarea{ min-height:120px; }

/* ---------- Actions ---------- */
.dhbe-actions{
  display:flex;
  gap:12px;
  margin-top:18px;
  flex-wrap:wrap;
}

/* ---------- Buttons ---------- */
.dhbe-btn{
  padding:12px 18px;
  border-radius:16px;
  font-weight:950;
  cursor:pointer;
  border:1px solid rgba(255,255,255,.14);
  background:rgba(255,255,255,.06);
  color:#fff;
}
.dhbe-btn.primary{
  background:#0056D2;
  border-color:#0056D2;
  box-shadow:0 12px 30px rgba(0,86,210,.35);
}
.dhbe-btn.primary:hover{ background:#0042a3; border-color:#0042a3; }
.dhbe-btn:disabled{ opacity:.4; cursor:not-allowed; }

/* =========================================================
   PREVIEW – Unten klein / letzter Step groß + klarer Header
   ========================================================= */

/* Wrapper (kommt aus overlay.php i.d.R. als data-preview-wrap="1") */
.dhbe-preview-wrap{
  margin-top:14px;
}

/* Preview Head (Injected in builder.js, falls nicht da) */
.dhbe-preview-head{
  display:flex;
  justify-content:space-between;
  align-items:flex-start;
  gap:12px;
  margin-bottom:10px;
}
.dhbe-preview-title{
  font-weight:950;
  font-size:13px;
  color:#fff;
}
.dhbe-preview-hint{
  font-size:12px;
  color:#a7b0bd;
  margin-top:2px;
}

/* Preview Container (klein default) */
.dhbe-preview{
  border-radius:18px;
  padding:16px;
  background:
    radial-gradient(520px 180px at 25% 0%, rgba(0,86,210,.16), rgba(0,86,210,0) 62%),
    linear-gradient(180deg, rgba(255,255,255,.08), rgba(255,255,255,.03));
  border:1px solid rgba(255,255,255,.10);
  box-shadow:0 18px 50px rgba(0,0,0,.38);
  overflow:auto;
}

/* Friendly empty state */
.dhbe-preview-empty{
  color:#a7b0bd;
  font-weight:900;
  padding:12px;
  border:1px dashed rgba(255,255,255,.18);
  border-radius:14px;
  background:rgba(255,255,255,.04);
}

/* DIN Preview Dokument (weiß) */
.dhbe-din-page{
  background:#fff;
  color:#111;
  border-radius:14px;
  padding:28px;
  max-width:900px;
  margin:0 auto;
  box-shadow:0 12px 30px rgba(0,0,0,.25);
}

/* ===== Letzter Step: Preview groß ===== */
.dhbe-overlay.is-last-step .dhbe-preview{
  margin-top:0;
  padding:32px;
  border-radius:22px;
}

.dhbe-overlay.is-last-step .dhbe-din-page{
  max-width:1000px;
  padding:36px;
}

/* Export Button unten: größer */
.dhbe-overlay.is-last-step .dhbe-actions{
  display:flex;
  justify-content:center;
  margin-top:24px;
}

.dhbe-overlay.is-last-step .dhbe-btn.primary{
  font-size:16px;
  padding:14px 26px;
  border-radius:18px;
  background:#0056D2;
  border-color:#0056D2;
  box-shadow:0 12px 28px rgba(0,86,210,.35);
}

/* (Optional) lock banner gut lesbar */
.dhbe-lock{
  display:block;
  margin-top:12px;
}



/* Digihelfer Quick Builder Light UI Fix */
body .dh_app,
body .dh-app,
body [id*="dh_App"],
body [class*="dh_app"],
body [class*="dh-app"]{
    background:#f8fafc !important;
    color:#0f172a !important;
}

body .dh_app *,
body .dh-app *,
body [id*="dh_App"] *,
body [class*="dh_app"] *,
body [class*="dh-app"] *{
    color:inherit;
    box-sizing:border-box;
}

body .dh_app .app-shell,
body .dh-app .app-shell,
body .dh_app .builder-shell,
body .dh-app .builder-shell{
    background:#ffffff !important;
    border-radius:20px !important;
    box-shadow:0 10px 30px rgba(15,23,42,.08) !important;
}

body .dh_app input,
body .dh_app textarea,
body .dh_app select,
body .dh-app input,
body .dh-app textarea,
body .dh-app select{
    background:#ffffff !important;
    color:#0f172a !important;
    border:1px solid #cbd5e1 !important;
    border-radius:12px !important;
}

body .dh_app button,
body .dh_app .button,
body .dh-app button,
body .dh-app .button{
    border-radius:12px !important;
    font-weight:700 !important;
}

body .dh_app .button-primary,
body .dh_app button.primary,
body .dh-app .button-primary,
body .dh-app button.primary{
    background:#0056d2 !important;
    color:#ffffff !important;
    border-color:#0056d2 !important;
}

body .dh_app .sidebar,
body .dh_app .left-panel,
body .dh_app .menu,
body .dh-app .sidebar,
body .dh-app .left-panel,
body .dh-app .menu{
    background:#ffffff !important;
    color:#0f172a !important;
}

body .dh_app .overlay,
body .dh_app .modal,
body .dh_app .loader,
body .dh-app .overlay,
body .dh-app .modal,
body .dh-app .loader{
    background:rgba(255,255,255,.94) !important;
    color:#0f172a !important;
    backdrop-filter:blur(4px);
}

body .dh_app [style*="background:#000"],
body .dh_app [style*="background: #000"],
body .dh-app [style*="background:#000"],
body .dh-app [style*="background: #000"]{
    background:#ffffff !important;
    color:#0f172a !important;
}

html, body{
    overflow-y:auto !important;
    -webkit-overflow-scrolling:touch;
}

@media (max-width:768px){
    body .dh_app,
    body .dh-app{
        padding:12px !important;
    }

    body .dh_app input,
    body .dh_app textarea,
    body .dh_app select,
    body .dh-app input,
    body .dh-app textarea,
    body .dh-app select{
        font-size:16px !important;
        min-height:44px !important;
    }
}




/* =========================================================
   Digihelfer Quick Builder Brand UI v6.2
   Ziel: heller Digihelfer-Look, lesbare Builder-Flächen,
   mobile Scrollbarkeit, klare Schritte, Inputs & Buttons.
   ========================================================= */

:root{
  --dhb-blue:#0056D2;
  --dhb-blue-2:#2563eb;
  --dhb-blue-soft:#eef6ff;
  --dhb-text:#0f172a;
  --dhb-muted:#64748b;
  --dhb-border:#dbe5f0;
  --dhb-card:#ffffff;
  --dhb-bg:#f8fbff;
  --dhb-shadow:0 14px 34px rgba(15,23,42,.08);
}

/* App-Grundfläche */
body .dh_app,
body .dh-app,
body #dh_App,
body #dh_app,
body [id*="dh_App"],
body [class*="dh_App"],
body [class*="dh-app"],
body [class*="dhbe"]{
  background:var(--dhb-bg)!important;
  color:var(--dhb-text)!important;
  max-width:100%!important;
  width:100%!important;
  overflow:visible!important;
  -webkit-overflow-scrolling:touch!important;
  font-family:system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif!important;
}

/* Kein globales Abdunkeln mehr */
body .dh_app *,
body .dh-app *,
body #dh_App *,
body #dh_app *,
body [id*="dh_App"] *,
body [class*="dh_App"] *,
body [class*="dh-app"] *,
body [class*="dhbe"] *{
  box-sizing:border-box!important;
  text-shadow:none!important;
}

/* Textfarben hart lesbar */
body .dh_app p,
body .dh_app div,
body .dh_app span,
body .dh_app label,
body .dh_app strong,
body .dh_app h1,
body .dh_app h2,
body .dh_app h3,
body .dh_app h4,
body .dh_app h5,
body .dh-app p,
body .dh-app div,
body .dh-app span,
body .dh-app label,
body .dh-app strong,
body .dh-app h1,
body .dh-app h2,
body .dh-app h3,
body .dh-app h4,
body .dh-app h5,
body #dh_App p,
body #dh_App div,
body #dh_App span,
body #dh_App label,
body #dh_App strong,
body #dh_App h1,
body #dh_App h2,
body #dh_App h3,
body #dh_App h4,
body #dh_App h5{
  color:var(--dhb-text)!important;
  opacity:1!important;
}

/* Hauptkarten / Builder-Bereiche */
body .dh_app [class*="builder"],
body .dh_app [class*="Builder"],
body .dh_app [class*="card"],
body .dh_app [class*="panel"],
body .dh_app [class*="box"],
body .dh_app [class*="section"],
body .dh-app [class*="builder"],
body .dh-app [class*="Builder"],
body .dh-app [class*="card"],
body .dh-app [class*="panel"],
body .dh-app [class*="box"],
body .dh-app [class*="section"],
body #dh_App [class*="builder"],
body #dh_App [class*="Builder"],
body #dh_App [class*="card"],
body #dh_App [class*="panel"],
body #dh_App [class*="box"],
body #dh_App [class*="section"]{
  background:var(--dhb-card)!important;
  color:var(--dhb-text)!important;
  border-color:var(--dhb-border)!important;
}

/* Spezifisch dunkle Flächen neutralisieren */
body .dh_app [style*="background:#020"],
body .dh_app [style*="background:#030"],
body .dh_app [style*="background:#040"],
body .dh_app [style*="background:#050"],
body .dh_app [style*="background:#060"],
body .dh_app [style*="background:#070"],
body .dh_app [style*="background:#080"],
body .dh_app [style*="background:#090"],
body .dh_app [style*="background:#0a"],
body .dh_app [style*="background:#0b"],
body .dh_app [style*="background:#0c"],
body .dh_app [style*="background:#0d"],
body .dh_app [style*="background:#0e"],
body .dh_app [style*="background:#0f"],
body .dh_app [style*="background: #020"],
body .dh_app [style*="background: #030"],
body .dh_app [style*="background: #040"],
body .dh_app [style*="background: #050"],
body .dh_app [style*="background: #060"],
body .dh_app [style*="background: #070"],
body .dh_app [style*="background: #080"],
body .dh_app [style*="background: #090"],
body .dh_app [style*="background: #0a"],
body .dh_app [style*="background: #0b"],
body .dh_app [style*="background: #0c"],
body .dh_app [style*="background: #0d"],
body .dh_app [style*="background: #0e"],
body .dh_app [style*="background: #0f"],
body .dh_app [style*="background:#000"],
body .dh_app [style*="background: #000"],
body .dh_app [style*="background-color:#000"],
body .dh_app [style*="background-color: #000"],
body .dh_app [style*="background-color:#020"],
body .dh_app [style*="background-color: #020"],
body .dh-app [style*="background:#000"],
body .dh-app [style*="background: #000"],
body .dh-app [style*="background-color:#000"],
body .dh-app [style*="background-color: #000"],
body #dh_App [style*="background:#000"],
body #dh_App [style*="background: #000"],
body #dh_App [style*="background-color:#000"],
body #dh_App [style*="background-color: #000"]{
  background:#ffffff!important;
  color:var(--dhb-text)!important;
  border:1px solid var(--dhb-border)!important;
  box-shadow:var(--dhb-shadow)!important;
}

/* Builder Container elegant */
body .dh_app .builder,
body .dh_app .Builder,
body .dh_app .builder-wrap,
body .dh_app .builder-wrapper,
body .dh_app .app-builder,
body .dh-app .builder,
body .dh-app .Builder,
body .dh-app .builder-wrap,
body .dh-app .builder-wrapper,
body .dh-app .app-builder,
body #dh_App .builder,
body #dh_App .Builder,
body #dh_App .builder-wrap,
body #dh_App .builder-wrapper,
body #dh_App .app-builder{
  border-radius:24px!important;
  padding:22px!important;
  box-shadow:var(--dhb-shadow)!important;
  overflow:visible!important;
}

/* Labels & Hilfetexte */
body .dh_app label,
body .dh-app label,
body #dh_App label{
  display:block!important;
  color:var(--dhb-text)!important;
  font-weight:900!important;
  margin:14px 0 7px!important;
}

body .dh_app small,
body .dh_app .hint,
body .dh_app .help,
body .dh_app .description,
body .dh-app small,
body .dh-app .hint,
body .dh-app .help,
body .dh-app .description,
body #dh_App small,
body #dh_App .hint,
body #dh_App .help,
body #dh_App .description{
  color:var(--dhb-muted)!important;
  font-weight:600!important;
}

/* Inputs */
body .dh_app input,
body .dh_app textarea,
body .dh_app select,
body .dh-app input,
body .dh-app textarea,
body .dh-app select,
body #dh_App input,
body #dh_App textarea,
body #dh_App select{
  width:100%!important;
  max-width:100%!important;
  background:#ffffff!important;
  color:var(--dhb-text)!important;
  border:1px solid #cbd5e1!important;
  border-radius:14px!important;
  padding:14px 16px!important;
  box-shadow:none!important;
  opacity:1!important;
  font-size:16px!important;
  line-height:1.4!important;
}

body .dh_app input::placeholder,
body .dh_app textarea::placeholder,
body .dh-app input::placeholder,
body .dh-app textarea::placeholder,
body #dh_App input::placeholder,
body #dh_App textarea::placeholder{
  color:#94a3b8!important;
  opacity:1!important;
}

body .dh_app input:focus,
body .dh_app textarea:focus,
body .dh_app select:focus,
body .dh-app input:focus,
body .dh-app textarea:focus,
body .dh-app select:focus,
body #dh_App input:focus,
body #dh_App textarea:focus,
body #dh_App select:focus{
  outline:none!important;
  border-color:var(--dhb-blue)!important;
  box-shadow:0 0 0 3px rgba(0,86,210,.14)!important;
}

/* Buttons / Chips */
body .dh_app button,
body .dh_app .button,
body .dh_app a.button,
body .dh-app button,
body .dh-app .button,
body .dh-app a.button,
body #dh_App button,
body #dh_App .button,
body #dh_App a.button{
  border-radius:14px!important;
  font-weight:900!important;
  text-decoration:none!important;
  text-shadow:none!important;
  opacity:1!important;
  min-height:44px!important;
  padding:11px 16px!important;
}

body .dh_app button,
body .dh_app .button,
body .dh-app button,
body .dh-app .button,
body #dh_App button,
body #dh_App .button{
  background:#eef4ff!important;
  color:#1e3a8a!important;
  border:1px solid #bfdbfe!important;
}

body .dh_app button:hover,
body .dh-app button:hover,
body #dh_App button:hover{
  filter:brightness(1.03)!important;
}

body .dh_app .active,
body .dh_app .is-active,
body .dh_app [aria-selected="true"],
body .dh_app button[aria-current="step"],
body .dh-app .active,
body .dh-app .is-active,
body .dh-app [aria-selected="true"],
body .dh-app button[aria-current="step"],
body #dh_App .active,
body #dh_App .is-active,
body #dh_App [aria-selected="true"],
body #dh_App button[aria-current="step"]{
  background:var(--dhb-blue)!important;
  color:#ffffff!important;
  border-color:var(--dhb-blue)!important;
}

body .dh_app .active *,
body .dh_app .is-active *,
body .dh_app [aria-selected="true"] *,
body .dh-app .active *,
body .dh-app .is-active *,
body .dh-app [aria-selected="true"] *,
body #dh_App .active *,
body #dh_App .is-active *,
body #dh_App [aria-selected="true"] *{
  color:#ffffff!important;
}

/* Stepper */
body .dh_app [class*="step"],
body .dh-app [class*="step"],
body #dh_App [class*="step"]{
  color:var(--dhb-text)!important;
}

body .dh_app [class*="step"][class*="active"],
body .dh_app [class*="step"].active,
body .dh_app [class*="step"].is-active,
body .dh-app [class*="step"][class*="active"],
body .dh-app [class*="step"].active,
body .dh-app [class*="step"].is-active,
body #dh_App [class*="step"][class*="active"],
body #dh_App [class*="step"].active,
body #dh_App [class*="step"].is-active{
  background:var(--dhb-blue)!important;
  color:#ffffff!important;
}

/* Overlays/Loader nicht mehr dunkel */
body .dh_app .overlay,
body .dh_app .modal,
body .dh_app .loader,
body .dh_app .loading,
body .dh_app [class*="overlay"],
body .dh_app [class*="modal"],
body .dh_app [class*="loader"],
body .dh_app [class*="loading"],
body .dh-app .overlay,
body .dh-app .modal,
body .dh-app .loader,
body .dh-app .loading,
body .dh-app [class*="overlay"],
body .dh-app [class*="modal"],
body .dh-app [class*="loader"],
body .dh-app [class*="loading"],
body #dh_App .overlay,
body #dh_App .modal,
body #dh_App .loader,
body #dh_App .loading,
body #dh_App [class*="overlay"],
body #dh_App [class*="modal"],
body #dh_App [class*="loader"],
body #dh_App [class*="loading"]{
  background:rgba(255,255,255,.96)!important;
  color:var(--dhb-text)!important;
  border-color:var(--dhb-border)!important;
  box-shadow:var(--dhb-shadow)!important;
  backdrop-filter:blur(4px);
}

body .dh_app .overlay *,
body .dh_app .modal *,
body .dh_app .loader *,
body .dh_app .loading *,
body .dh_app [class*="overlay"] *,
body .dh_app [class*="modal"] *,
body .dh_app [class*="loader"] *,
body .dh_app [class*="loading"] *,
body .dh-app .overlay *,
body .dh-app .modal *,
body .dh-app .loader *,
body .dh-app .loading *,
body .dh-app [class*="overlay"] *,
body .dh-app [class*="modal"] *,
body .dh-app [class*="loader"] *,
body .dh-app [class*="loading"] *,
body #dh_App .overlay *,
body #dh_App .modal *,
body #dh_App .loader *,
body #dh_App .loading *,
body #dh_App [class*="overlay"] *,
body #dh_App [class*="modal"] *,
body #dh_App [class*="loader"] *,
body #dh_App [class*="loading"] *{
  color:var(--dhb-text)!important;
  opacity:1!important;
}

/* Scroll-Fix */
html,
body{
  overflow-y:auto!important;
  -webkit-overflow-scrolling:touch!important;
}

body .dh_app,
body .dh-app,
body #dh_App{
  height:auto!important;
  min-height:0!important;
  max-height:none!important;
}

/* Mobile */
@media (max-width:768px){
  body .dh_app,
  body .dh-app,
  body #dh_App{
    padding:12px!important;
  }

  body .dh_app .builder,
  body .dh_app .Builder,
  body .dh_app .builder-wrap,
  body .dh_app .builder-wrapper,
  body .dh_app .app-builder,
  body .dh-app .builder,
  body .dh-app .Builder,
  body .dh-app .builder-wrap,
  body .dh-app .builder-wrapper,
  body .dh-app .app-builder,
  body #dh_App .builder,
  body #dh_App .Builder,
  body #dh_App .builder-wrap,
  body #dh_App .builder-wrapper,
  body #dh_App .app-builder{
    padding:16px!important;
    border-radius:20px!important;
  }

  body .dh_app h1,
  body .dh-app h1,
  body #dh_App h1{font-size:28px!important}

  body .dh_app h2,
  body .dh-app h2,
  body #dh_App h2{font-size:24px!important}

  body .dh_app h3,
  body .dh-app h3,
  body #dh_App h3{font-size:21px!important}

  body .dh_app button,
  body .dh_app .button,
  body .dh-app button,
  body .dh-app .button,
  body #dh_App button,
  body #dh_App .button{
    white-space:normal!important;
  }
}


/* Digihelfer Builder UX Polish v6.3 */
body .dh_app .builder,
body .dh_app .Builder,
body .dh_app .builder-wrap,
body .dh_app .builder-wrapper,
body .dh-app .builder,
body .dh-app .Builder,
body .dh-app .builder-wrap,
body .dh-app .builder-wrapper{
    background:#ffffff!important;
    border:1px solid #dbe5f0!important;
    border-radius:28px!important;
    padding:28px!important;
    box-shadow:0 18px 44px rgba(15,23,42,.10)!important;
}

body .dh_app [class*="step"],
body .dh_app [class*="Step"],
body .dh-app [class*="step"],
body .dh-app [class*="Step"]{
    border-radius:999px!important;
    padding:12px 18px!important;
    border:1px solid #dbe5f0!important;
    background:#ffffff!important;
    color:#334155!important;
    font-weight:800!important;
    margin:0 10px 12px 0!important;
    display:inline-flex!important;
    align-items:center!important;
    min-height:48px!important;
}

body .dh_app [class*="step"].active,
body .dh_app [class*="step"].is-active,
body .dh-app [class*="step"].active,
body .dh-app [class*="step"].is-active{
    background:#0056D2!important;
    color:#ffffff!important;
    border-color:#0056D2!important;
    box-shadow:0 10px 22px rgba(0,86,210,.22)!important;
}

body .dh_app .field,
body .dh_app .form-group,
body .dh_app [class*="field"],
body .dh-app .field,
body .dh-app .form-group,
body .dh-app [class*="field"]{
    margin-bottom:22px!important;
}

body .dh_app input,
body .dh_app textarea,
body .dh_app select,
body .dh-app input,
body .dh-app textarea,
body .dh-app select{
    border-radius:16px!important;
    min-height:54px!important;
    padding:15px 18px!important;
}

body .dh_app button,
body .dh_app .button,
body .dh-app button,
body .dh-app .button{
    border-radius:16px!important;
    min-height:50px!important;
    padding:12px 22px!important;
}

@media (max-width:768px){
    body .dh_app .builder,
    body .dh_app .Builder,
    body .dh_app .builder-wrap,
    body .dh_app .builder-wrapper,
    body .dh-app .builder,
    body .dh-app .Builder,
    body .dh-app .builder-wrap,
    body .dh-app .builder-wrapper{
        padding:18px!important;
        border-radius:22px!important;
    }

    body .dh_app [class*="step"],
    body .dh_app [class*="Step"],
    body .dh-app [class*="step"],
    body .dh-app [class*="Step"]{
        width:100%!important;
        justify-content:flex-start!important;
        margin-right:0!important;
    }
}



/* =========================================================
   DHBE 6.4 - Kategorie-Auswahl zuerst
   ========================================================= */
.dhbe-start{
  margin:18px 0 22px!important;
}

.dhbe-cat-grid{
  display:grid!important;
  grid-template-columns:repeat(auto-fit,minmax(180px,1fr))!important;
  gap:14px!important;
}

.dhbe-cat-card{
  appearance:none!important;
  display:flex!important;
  flex-direction:column!important;
  align-items:flex-start!important;
  justify-content:center!important;
  min-height:96px!important;
  padding:20px!important;
  border-radius:22px!important;
  border:1px solid #bfdbfe!important;
  background:#f8fbff!important;
  color:#1e3a8a!important;
  box-shadow:0 10px 24px rgba(15,23,42,.06)!important;
  cursor:pointer!important;
  text-align:left!important;
  transition:all .18s ease!important;
}

.dhbe-cat-card span{
  color:#1e3a8a!important;
  font-size:22px!important;
  font-weight:950!important;
  letter-spacing:-.02em!important;
}

.dhbe-cat-card small{
  color:#64748b!important;
  font-size:13px!important;
  font-weight:750!important;
  margin-top:7px!important;
}

.dhbe-cat-card:hover{
  transform:translateY(-2px)!important;
  border-color:#0056D2!important;
  box-shadow:0 14px 30px rgba(0,86,210,.14)!important;
}

.dhbe-cat-card.is-active,
.dhbe-cat-card:focus{
  background:#0056D2!important;
  border-color:#0056D2!important;
  color:#fff!important;
  outline:none!important;
}

.dhbe-cat-card.is-active span,
.dhbe-cat-card.is-active small,
.dhbe-cat-card:focus span,
.dhbe-cat-card:focus small{
  color:#fff!important;
}

.dhbe-template-stage{
  margin-top:18px!important;
}

.dhbe-template-stage-head{
  display:flex!important;
  align-items:center!important;
  justify-content:space-between!important;
  gap:14px!important;
  margin:0 0 18px!important;
  padding:14px 16px!important;
  border:1px solid #dbe5f0!important;
  border-radius:18px!important;
  background:#ffffff!important;
  box-shadow:0 8px 22px rgba(15,23,42,.05)!important;
}

.dhbe-back-cats{
  border:1px solid #bfdbfe!important;
  background:#eef4ff!important;
  color:#1e3a8a!important;
  border-radius:12px!important;
  padding:10px 14px!important;
  font-weight:900!important;
  cursor:pointer!important;
}

.dhbe-active-cat-title{
  color:#0f172a!important;
  font-weight:950!important;
  font-size:20px!important;
  letter-spacing:-.02em!important;
}

.dhbe-row{
  background:#fff!important;
  border:1px solid #e2e8f0!important;
  border-radius:22px!important;
  padding:18px!important;
  margin-bottom:18px!important;
  box-shadow:0 10px 28px rgba(15,23,42,.06)!important;
}

.dhbe-row-head{
  display:flex!important;
  align-items:flex-end!important;
  justify-content:space-between!important;
  gap:12px!important;
  margin-bottom:14px!important;
}

.dhbe-row-head h3{
  color:#0f172a!important;
  font-size:26px!important;
  line-height:1.1!important;
  margin:0!important;
  font-weight:950!important;
}

.dhbe-row-hint{
  color:#64748b!important;
  font-weight:750!important;
  font-size:14px!important;
}

.dhbe-carousel{
  display:grid!important;
  grid-template-columns:repeat(auto-fit,minmax(220px,1fr))!important;
  gap:14px!important;
}

.dhbe-card{
  width:100%!important;
  min-width:0!important;
  max-width:none!important;
  background:#ffffff!important;
  color:#0f172a!important;
  border:1px solid #dbe5f0!important;
  box-shadow:0 8px 20px rgba(15,23,42,.06)!important;
  text-align:left!important;
}

.dhbe-card-title{
  color:#0f172a!important;
}

.dhbe-badge{
  background:#eef4ff!important;
  color:#1e3a8a!important;
  border:1px solid #bfdbfe!important;
  border-radius:999px!important;
  padding:5px 8px!important;
  font-size:12px!important;
  font-weight:900!important;
  display:inline-flex!important;
  margin:0 5px 5px 0!important;
}

@media (max-width:720px){
  .dhbe-cat-grid{
    grid-template-columns:1fr!important;
    gap:12px!important;
  }

  .dhbe-cat-card{
    min-height:82px!important;
    padding:17px!important;
  }

  .dhbe-cat-card span{
    font-size:20px!important;
  }

  .dhbe-template-stage-head{
    align-items:flex-start!important;
    flex-direction:column!important;
  }

  .dhbe-carousel{
    grid-template-columns:1fr!important;
  }
}


/* =========================================================
   DHBE 6.5 - Soft SaaS Category UI
   ========================================================= */

.dhbe-cat-grid{
    gap:12px!important;
}

.dhbe-cat-card{
    min-height:74px!important;
    padding:16px 18px!important;
    background:#f8fbff!important;
    border:1px solid #d7e6fb!important;
    border-radius:18px!important;
    box-shadow:0 2px 10px rgba(15,23,42,.04)!important;
    transform:none!important;
}

.dhbe-cat-card:hover{
    transform:none!important;
    background:#f2f8ff!important;
    border-color:#8eb8ff!important;
    box-shadow:0 4px 14px rgba(0,86,210,.08)!important;
}

.dhbe-cat-card.is-active{
    background:#eef5ff!important;
    border-color:#6aa3ff!important;
    box-shadow:0 4px 14px rgba(0,86,210,.10)!important;
}

.dhbe-cat-card span{
    font-size:19px!important;
    font-weight:850!important;
    color:#163b7a!important;
}

.dhbe-cat-card small{
    margin-top:4px!important;
    font-size:12px!important;
    color:#6b7a90!important;
    font-weight:700!important;
}

.dhbe-template-stage-head{
    background:#f8fbff!important;
    border:1px solid #dbe7f6!important;
    box-shadow:none!important;
}

.dhbe-back-cats{
    background:#eef5ff!important;
    border:1px solid #cfe1ff!important;
    color:#1e4ea8!important;
    box-shadow:none!important;
}

.dhbe-row{
    border-radius:18px!important;
    border:1px solid #e7eef8!important;
    box-shadow:0 2px 12px rgba(15,23,42,.04)!important;
}

.dhbe-card{
    border-radius:16px!important;
    border:1px solid #e3ebf7!important;
    box-shadow:0 1px 8px rgba(15,23,42,.03)!important;
    background:#fbfdff!important;
}

.dhbe-card:hover{
    border-color:#b9d3ff!important;
    box-shadow:0 4px 14px rgba(0,86,210,.07)!important;
}

.dhbe-row-head h3{
    font-size:24px!important;
    font-weight:900!important;
}

@media (max-width:720px){
    .dhbe-cat-card{
        min-height:68px!important;
        padding:14px 16px!important;
    }

    .dhbe-cat-card span{
        font-size:18px!important;
    }
}



/* =========================================================
   DHBE 6.8 - Builder Spacing / Premium Layout Fix
   Ziel: nicht mehr gequetscht, mehr Innenabstand, max. Formularbreite
   ========================================================= */

/* Modal/Builder nicht mehr randlos */
.dhbe-modal-panel{
    padding:0!important;
    overflow:visible!important;
}

.dhbe-modal-body{
    padding:28px 34px!important;
    background:#ffffff!important;
    border-radius:0 0 22px 22px!important;
}

/* Overlay/Builder Hauptbereich */
.dhbe-overlay{
    padding:30px 34px!important;
    background:#ffffff!important;
    color:#0f172a!important;
    border-radius:22px!important;
    max-width:1040px!important;
    margin:0 auto!important;
    box-sizing:border-box!important;
}

/* Inhalt sauber zentrieren */
.dhbe-overlay > *,
.dhbe-form,
.dhbe-preview-wrap,
.dhbe-actions,
[data-form="1"],
[data-stepper="1"]{
    max-width:920px!important;
    margin-left:auto!important;
    margin-right:auto!important;
}

/* Stepper mit Luft */
.dhbe-stepper,
[data-stepper="1"]{
    display:flex!important;
    flex-wrap:wrap!important;
    gap:12px!important;
    margin:18px auto 28px!important;
    padding:4px 0!important;
}

/* Steps nicht bis an den Rand */
.dhbe-step{
    margin:0!important;
    padding:12px 18px!important;
    border-radius:999px!important;
}

/* Formularfelder ruhiger */
.dhbe-form,
[data-form="1"]{
    padding:6px 0 10px!important;
}

.dhbe-field{
    margin:0 0 26px!important;
}

.dhbe-label{
    margin:0 0 10px!important;
    font-size:15px!important;
    line-height:1.35!important;
}

/* Inputs Premium */
.dhbe-input,
.dhbe-textarea,
.dhbe-select{
    min-height:56px!important;
    padding:15px 18px!important;
    border-radius:16px!important;
    font-size:16px!important;
    line-height:1.4!important;
    width:100%!important;
}

/* Textarea mehr Raum */
.dhbe-textarea{
    min-height:150px!important;
}

/* Buttons unten nicht gequetscht */
.dhbe-actions{
    display:flex!important;
    justify-content:space-between!important;
    align-items:center!important;
    gap:14px!important;
    margin-top:32px!important;
    padding-top:20px!important;
    border-top:1px solid #e5edf6!important;
}

.dhbe-actions .dhbe-btn,
.dhbe-actions button{
    min-width:150px!important;
}

/* Preview etwas absetzen */
.dhbe-preview-wrap{
    margin-top:30px!important;
    padding:18px!important;
    border:1px solid #e5edf6!important;
    border-radius:20px!important;
    background:#f8fbff!important;
}

/* Headline und Builder-Titel mit Luft */
.dhbe-overlay h1,
.dhbe-overlay h2,
.dhbe-overlay h3{
    margin-top:0!important;
    margin-bottom:16px!important;
}

.dhbe-modal-header{
    padding:18px 26px!important;
    background:#f8fbff!important;
    border-bottom:1px solid #e5edf6!important;
    border-radius:22px 22px 0 0!important;
}

.dhbe-modal-title{
    font-weight:900!important;
    color:#0f172a!important;
    font-size:22px!important;
}

.dhbe-x{
    min-width:48px!important;
    width:48px!important;
    height:48px!important;
    border-radius:14px!important;
}

/* Desktop: Builder im Studio breiter, aber nicht randlos */
@media (min-width: 900px){
    .dhbe-modal-panel{
        max-width:1080px!important;
        margin:24px auto!important;
    }
}

/* Mobile: genug Abstand, aber nicht zu breit */
@media (max-width: 720px){
    .dhbe-modal-body{
        padding:18px 16px!important;
    }

    .dhbe-overlay{
        padding:20px 16px!important;
        border-radius:18px!important;
    }

    .dhbe-field{
        margin-bottom:22px!important;
    }

    .dhbe-actions{
        flex-direction:column!important;
        align-items:stretch!important;
    }

    .dhbe-actions .dhbe-btn,
    .dhbe-actions button{
        width:100%!important;
        min-width:0!important;
    }

    .dhbe-stepper,
    [data-stepper="1"]{
        gap:10px!important;
        margin-bottom:22px!important;
    }

    .dhbe-step{
        width:100%!important;
        justify-content:flex-start!important;
    }
}



/* =========================================================
   DHBE 6.9 - Kategorie-Zurück Lesbarkeit Fix
   ========================================================= */

/* Normalzustand immer lesbar halten */
.dhbe-start .dhbe-cat-card,
.dhbe-start .dhbe-cat-card:not(.is-active),
.dhbe-start .dhbe-cat-card:not(:focus),
.dhbe-start.dhbe-categories-view .dhbe-cat-card{
    background:#f8fbff!important;
    border:1px solid #d7e6fb!important;
    color:#163b7a!important;
    box-shadow:0 2px 10px rgba(15,23,42,.04)!important;
    opacity:1!important;
}

.dhbe-start .dhbe-cat-card span,
.dhbe-start .dhbe-cat-card:not(.is-active) span,
.dhbe-start .dhbe-cat-card:not(:focus) span,
.dhbe-start.dhbe-categories-view .dhbe-cat-card span{
    color:#163b7a!important;
    opacity:1!important;
}

.dhbe-start .dhbe-cat-card small,
.dhbe-start .dhbe-cat-card:not(.is-active) small,
.dhbe-start .dhbe-cat-card:not(:focus) small,
.dhbe-start.dhbe-categories-view .dhbe-cat-card small{
    color:#6b7a90!important;
    opacity:1!important;
}

/* Nur während Hover/echter Auswahl stärker betonen */
.dhbe-start .dhbe-cat-card:hover{
    background:#f2f8ff!important;
    border-color:#8eb8ff!important;
}

.dhbe-start .dhbe-cat-card.is-active{
    background:#eef5ff!important;
    border-color:#6aa3ff!important;
    color:#163b7a!important;
}

.dhbe-start .dhbe-cat-card.is-active span{
    color:#163b7a!important;
}

.dhbe-start .dhbe-cat-card.is-active small{
    color:#6b7a90!important;
}

/* Browser-Focus darf keine weiße Schrift erzwingen */
.dhbe-start .dhbe-cat-card:focus,
.dhbe-start .dhbe-cat-card:focus-visible{
    background:#eef5ff!important;
    border-color:#6aa3ff!important;
    color:#163b7a!important;
    outline:3px solid rgba(0,86,210,.12)!important;
}

.dhbe-start .dhbe-cat-card:focus span,
.dhbe-start .dhbe-cat-card:focus-visible span{
    color:#163b7a!important;
}

.dhbe-start .dhbe-cat-card:focus small,
.dhbe-start .dhbe-cat-card:focus-visible small{
    color:#6b7a90!important;
}

/* =========================================================
   v6.15 – saubere responsive DIN-Vorschau
   ========================================================= */
.dhbe-ov-top{
  display:grid;
  grid-template-columns:minmax(300px, .85fr) minmax(420px, 1.15fr);
  gap:24px;
  align-items:start;
}
.dhbe-ov-left,
.dhbe-ov-right{min-width:0;}
.dhbe-ov-right{
  position:sticky;
  top:16px;
}
.dhbe-preview{
  overflow:hidden;
  padding:18px;
}
.dhbe-preview-stage{
  position:relative;
  width:100%;
  min-height:240px;
  overflow:hidden;
}
.dhbe-preview-scale{
  position:absolute;
  top:0;
  left:50%;
  width:210mm;
  transform-origin:top left;
  will-change:transform;
}
.dhbe-preview-scale .dhbe-page{
  margin:0;
  border-radius:0;
}

@media (max-width: 860px){
  .dhbe-ov-top{display:block;}
  .dhbe-ov-right{
    position:static;
    margin-top:20px;
  }
  .dhbe-preview{
    padding:10px;
    border-radius:16px;
  }
  .dhbe-preview-head{
    position:sticky;
    top:0;
    z-index:5;
    padding:10px 0;
    background:#0b1220;
  }
  .dhbe-preview-stage{min-height:180px;}
  .dhbe-actions{
    position:sticky;
    bottom:0;
    z-index:8;
    padding:10px 0 calc(10px + env(safe-area-inset-bottom));
    background:linear-gradient(180deg,rgba(11,18,32,0),#0b1220 25%);
  }
  .dhbe-overlay.is-last-step .dhbe-preview{padding:10px;}
}


/* =========================================================
   v6.16 – reine Text-Live-Vorschau
   ========================================================= */
.dhbe-ov-top{
  grid-template-columns:minmax(300px, 1fr) minmax(320px, .9fr);
}
.dhbe-ov-right{
  position:sticky;
  top:16px;
}
.dhbe-preview{
  overflow:visible;
  padding:0;
  background:transparent;
  border:0;
  box-shadow:none;
}
.dhbe-live-text{
  width:100%;
  box-sizing:border-box;
  padding:22px 24px;
  background:#fff;
  color:#111827;
  border:1px solid #dfe5ee;
  border-radius:16px;
  box-shadow:0 10px 30px rgba(15,23,42,.08);
  font-family:Arial,Helvetica,sans-serif;
  text-align:left;
}
.dhbe-live-text-subject{
  margin:0 0 18px;
  font-size:18px;
  line-height:1.35;
  font-weight:700;
  overflow-wrap:anywhere;
}
.dhbe-live-text-body{
  font-size:16px;
  line-height:1.6;
  white-space:normal;
  overflow-wrap:anywhere;
}
.dhbe-preview-empty{
  min-height:120px;
  display:flex;
  align-items:center;
  justify-content:center;
  text-align:center;
}
@media (max-width:860px){
  .dhbe-ov-right{
    position:static;
    margin-top:18px;
  }
  .dhbe-preview-head{
    position:static;
    padding:8px 0 10px;
    background:transparent;
  }
  .dhbe-live-text{
    padding:18px 16px;
    border-radius:14px;
  }
  .dhbe-live-text-subject{font-size:17px;}
  .dhbe-live-text-body{font-size:15px;line-height:1.55;}
}


/* =========================================================
   v6.17 – aufgewertete Inhaltsvorschau
   ========================================================= */
.dhbe-live-text-kicker{
  display:flex;
  align-items:center;
  gap:8px;
  margin:0 0 18px;
  padding-bottom:12px;
  border-bottom:1px solid #e8edf4;
  color:#64748b;
  font-size:12px;
  line-height:1.2;
  font-weight:700;
  letter-spacing:.06em;
  text-transform:uppercase;
}
.dhbe-live-text-kicker span{
  font-size:16px;
  line-height:1;
  color:#2563eb;
}
.dhbe-preview-value{
  padding:1px 3px;
  border-radius:4px;
  background:#eef5ff;
  box-decoration-break:clone;
  -webkit-box-decoration-break:clone;
}
.dhbe-preview-missing{
  display:inline-block;
  padding:1px 6px;
  border:1px dashed #f59e0b;
  border-radius:5px;
  background:#fff8e6;
  color:#925f00;
  font-size:.88em;
  font-style:normal;
  white-space:nowrap;
}
.dhbe-pdf-layout-note{
  display:none;
  flex-basis:100%;
  margin-top:2px;
  color:#64748b;
  font-size:12px;
  line-height:1.4;
}
.dhbe-overlay.is-last-step .dhbe-pdf-layout-note{
  display:block;
}
@media (max-width:860px){
  .dhbe-live-text-kicker{margin-bottom:15px;}
  .dhbe-pdf-layout-note{
    width:100%;
    padding:0 2px;
    color:#94a3b8;
  }
}
\n\n/* =========================================================
   v6.18 – Empfängerdaten in der Inhaltsvorschau
   ========================================================= */
.dhbe-live-recipient{
  margin:0 0 20px;
  padding:14px 16px;
  border:1px solid #e2e8f0;
  border-radius:12px;
  background:#f8fafc;
}
.dhbe-live-section-label{
  margin:0 0 8px;
  color:#64748b;
  font-size:11px;
  line-height:1.2;
  font-weight:800;
  letter-spacing:.06em;
  text-transform:uppercase;
}
.dhbe-live-recipient-lines{
  color:#111827;
  font-size:15px;
  line-height:1.5;
}
.dhbe-live-recipient-lines > div + div{margin-top:2px;}
.dhbe-live-recipient .dhbe-preview-value{
  padding:0;
  background:transparent;
}
.dhbe-live-subject-label{margin-top:2px;}
@media (max-width:860px){
  .dhbe-live-recipient{
    margin-bottom:17px;
    padding:12px 13px;
  }
  .dhbe-live-recipient-lines{font-size:14px;}
}