/* =========================================================
   esf-Druckdesigner 31.1 – finales Design
   ========================================================= */

/* Kopfzeile */
html body.ui-design-v31 header.topbar {
    background: #fff !important;
    background-image: none !important;
    background-color: #fff !important;
    color: #111 !important;
    border: 0 !important;
    border-bottom: 5px solid #20800d !important;
    box-shadow: 0 2px 8px rgba(0,0,0,.12) !important;
}

html body.ui-design-v31 header.topbar .brand,
html body.ui-design-v31 header.topbar .brand b {
    color: #111 !important;
}

html body.ui-design-v31 header.topbar .brand small {
    color: #777 !important;
}

html body.ui-design-v31 header.topbar .brand-logo {
    box-shadow: none !important;
}

/* Kopfzeilenbuttons */
html body.ui-design-v31 header.topbar #preflightBtn,
html body.ui-design-v31 header.topbar #previewBtn,
html body.ui-design-v31 header.topbar #printBtn {
    background: #111 !important;
    background-image: none !important;
    background-color: #111 !important;
    border: 1px solid #111 !important;
    color: #fff !important;
    border-radius: 5px !important;
    box-shadow: none !important;
}

html body.ui-design-v31 header.topbar #preflightBtn:hover,
html body.ui-design-v31 header.topbar #previewBtn:hover,
html body.ui-design-v31 header.topbar #printBtn:hover {
    background: #20800d !important;
    background-image: none !important;
    background-color: #20800d !important;
    border-color: #20800d !important;
    color: #fff !important;
}

/* =========================================================
   Rechte Eigenschaftenleiste – Bildbearbeitung
   Alle fünf Buttons exakt gleich groß.
   ========================================================= */

/*
   Wichtig:
   Obere Zeile  = 2 Buttons + 1 freie Rasterspalte
   Untere Zeile = 3 Buttons

   Beide Zeilen besitzen EXAKT dasselbe 3-Spalten-Raster.
*/
html body.ui-design-v31 #imagePanel .image-crop-action-row,
html body.ui-design-v31 #imagePanel .image-action-row {
    display: grid !important;
    grid-template-columns: repeat(3, 1fr) !important;
    gap: 5px !important;
    width: 100% !important;
    box-sizing: border-box !important;
}

/* Obere Zeile */
html body.ui-design-v31 #cropImageBtn {
    grid-column: 1 !important;
}

html body.ui-design-v31 #resetImageCropBtn {
    grid-column: 2 !important;
}

/* Untere Zeile */
html body.ui-design-v31 #replaceImageBtn {
    grid-column: 1 !important;
}

html body.ui-design-v31 #openImageEditorBtn {
    grid-column: 2 !important;
}

html body.ui-design-v31 #restoreOriginalImageBtn {
    grid-column: 3 !important;
}

/* Alle fünf Buttons identisch */
html body.ui-design-v31 #cropImageBtn,
html body.ui-design-v31 #resetImageCropBtn,
html body.ui-design-v31 #replaceImageBtn,
html body.ui-design-v31 #openImageEditorBtn,
html body.ui-design-v31 #restoreOriginalImageBtn {
    width: 100% !important;
    min-width: 0 !important;
    max-width: none !important;

    height: 30px !important;
    min-height: 30px !important;
    max-height: 30px !important;

    margin: 0 !important;
    padding: 4px 5px !important;
    box-sizing: border-box !important;

    font-family: inherit !important;
    font-size: 9.5px !important;
    font-weight: 400 !important;
    line-height: 1 !important;
    text-align: center !important;
    white-space: nowrap !important;

    display: flex !important;
    align-items: center !important;
    justify-content: center !important;

    flex: none !important;
}

/* Abstand zwischen erster und zweiter Buttonzeile */
html body.ui-design-v31 #imagePanel .image-crop-action-row {
    margin-bottom: 8px !important;
}

html body.ui-design-v31 #imagePanel .image-action-row {
    margin-top: 0 !important;
}

/* =========================================================
   Ebenen – gleiche kompakte Buttongröße
   ========================================================= */

html body.ui-design-v31 .properties .layer-action-row {
    display: grid !important;
    grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
    gap: 5px !important;
    width: 100% !important;
}

html body.ui-design-v31 #toFrontBtn,
html body.ui-design-v31 #toBackBtn {
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    width: 100% !important;
    min-width: 0 !important;
    height: 30px !important;
    min-height: 30px !important;
    max-height: 30px !important;
    margin: 0 !important;
    padding: 4px 5px !important;
    box-sizing: border-box !important;
    font-family: inherit !important;
    font-size: 9.5px !important;
    font-weight: 400 !important;
    line-height: 1 !important;
    white-space: nowrap !important;
    flex: none !important;
}


/* === Größerer Verschiebegriff für Elemente === */
html body.ui-design-v31 .item .move-grip {
    left: -8px !important;
    top: -8px !important;
    width: 24px !important;
    height: 24px !important;
    border-radius: 5px !important;
    font-size: 15px !important;
    line-height: 22px !important;
    touch-action: none;
}
/* === Ende größerer Verschiebegriff === */

/* =========================================================
   Version 31.2 – Komfortfunktionen
   ========================================================= */

/* Rückgängig/Wiederholen bewusst sichtbar und direkt erreichbar. */
html body.ui-design-v31 .undo-redo-quick{
    display:grid;
    grid-template-columns:1fr 1fr;
    gap:5px;
    margin:0 0 9px;
}

html body.ui-design-v31 .undo-redo-quick button{
    display:flex;
    align-items:center;
    justify-content:center;
    gap:3px;
    min-width:0;
    min-height:32px;
    padding:5px 3px;
    border:1px solid #cfd5db;
    border-radius:6px;
    background:#fff;
    color:#20252a;
    font-size:9px;
    font-weight:600;
    line-height:1;
    white-space:nowrap;
    cursor:pointer;
}


html body.ui-design-v31 .undo-redo-quick button:hover:not(:disabled){
    border-color:#20800d;
    background:#edf6eb;
}

html body.ui-design-v31 .undo-redo-quick button:disabled{
    opacity:.38;
    cursor:default;
}

/* Format übertragen */
html body.ui-design-v31 .format-painter-status{
    display:inline-flex;
    align-items:center;
    min-height:26px;
    padding:4px 9px;
    border:1px solid rgba(32,128,13,.28);
    border-radius:999px;
    background:#edf6eb;
    color:#155d08;
    font-size:11px;
    font-weight:700;
    white-space:nowrap;
}

html body.ui-design-v31 .format-painter-status.hidden{
    display:none !important;
}

html body.ui-design-v31.format-painter-active #canvasHost .item:not(.locked),
html body.ui-design-v31.format-painter-active #canvasHost .item:not(.locked) .content{
    cursor:copy !important;
}

/* Zuletzt verwendete Farben in der großen CMYK-Palette. */
html body.ui-design-v31 .cmyk-palette-recent-wrap{
    padding:8px 10px 9px;
    border-bottom:1px solid #e4e7ea;
}

html body.ui-design-v31 .cmyk-palette-recent-wrap.hidden{
    display:none !important;
}

html body.ui-design-v31 .cmyk-palette-recent-label{
    display:block;
    margin:0 0 6px;
    color:#59616a;
    font-size:10px;
    font-weight:700;
    text-transform:uppercase;
    letter-spacing:.04em;
}

html body.ui-design-v31 .cmyk-palette-recent{
    display:flex;
    flex-wrap:wrap;
    gap:5px;
}

html body.ui-design-v31 .cmyk-palette-recent-swatch{
    width:28px;
    height:28px;
    margin:0;
    padding:0;
    border:1px solid rgba(0,0,0,.20);
    border-radius:5px;
    box-sizing:border-box;
    cursor:pointer;
}

html body.ui-design-v31 .cmyk-palette-recent-swatch:hover{
    outline:2px solid #20800d;
    outline-offset:1px;
}

/* Zuletzt verwendete Farben auch in der schwebenden Objektpalette. */
html body.ui-design-v31 .designer-context-recent-label{
    padding-top:5px;
}

html body.ui-design-v31 .designer-context-recent-colors{
    display:flex;
    flex-wrap:wrap;
    gap:4px;
    padding:0 6px 8px;
}

html body.ui-design-v31 .designer-context-recent-swatch{
    width:24px;
    height:24px;
    border-radius:4px;
}

/* Seitenübergreifendes Kopieren */
html body.ui-design-v31 .copy-to-pages-card{
    width:min(520px,calc(100vw - 30px));
    max-height:min(720px,calc(100vh - 30px));
}

html body.ui-design-v31 .copy-to-pages-hint{
    margin:0 0 12px;
    color:#555f68;
    font-size:12px;
    line-height:1.4;
}

html body.ui-design-v31 .copy-to-pages-list{
    display:flex;
    flex-direction:column;
    gap:6px;
    max-height:46vh;
    overflow:auto;
}

html body.ui-design-v31 .copy-to-pages-option{
    display:flex;
    align-items:center;
    gap:10px;
    margin:0;
    padding:9px 10px;
    border:1px solid #dfe3e7;
    border-radius:7px;
    background:#fafbfc;
    cursor:pointer;
}

html body.ui-design-v31 .copy-to-pages-option:hover{
    border-color:#20800d;
    background:#f1f8ef;
}

html body.ui-design-v31 .copy-to-pages-option input{
    width:17px;
    height:17px;
    margin:0;
    accent-color:#20800d;
}

html body.ui-design-v31 .copy-to-pages-option span{
    display:flex;
    flex-direction:column;
    min-width:0;
}

html body.ui-design-v31 .copy-to-pages-option b{
    font-size:12px;
}

html body.ui-design-v31 .copy-to-pages-option small{
    margin-top:2px;
    overflow:hidden;
    color:#6c747c;
    font-size:10px;
    text-overflow:ellipsis;
    white-space:nowrap;
}

/* =========================================================
   Projektname im Arbeitsbereich
   ========================================================= */
html body.ui-design-v31 .workspace-project-name{
    display:inline-flex;
    align-items:center;
    gap:6px;
    min-width:0;
    font-size:11px;
    font-weight:600;
    white-space:nowrap;
}

html body.ui-design-v31 .workspace-project-name > span{
    color:#59636d;
}

html body.ui-design-v31 #workspaceProjectName{
    width:170px;
    max-width:24vw;
    height:28px;
    min-height:28px;
    padding:3px 7px;
    border:1px solid #cfd5dc;
    border-radius:5px;
    box-sizing:border-box;
    background:#fff;
    color:#242a30;
    font-family:inherit;
    font-size:11px;
    font-weight:600;
    line-height:1.2;
}

html body.ui-design-v31 #workspaceProjectName:hover{
    border-color:#aeb7c1;
}

html body.ui-design-v31 #workspaceProjectName:focus{
    border-color:#20800d;
    outline:2px solid rgba(32,128,13,.16);
    outline-offset:1px;
}

html body.ui-design-v31 #workspaceProjectName::placeholder{
    color:#8a939d;
    font-weight:400;
}

@media(max-width:767px){
    html body.ui-design-v31 .workspace-project-name > span{
        display:none;
    }

    html body.ui-design-v31 #workspaceProjectName{
        width:120px;
        max-width:32vw;
    }
}
/* === Ende Projektname im Arbeitsbereich === */

/* =========================================================
   V32.1 – Seitenüberschrift über der Arbeitsfläche vorerst ausblenden
   Struktur und Logik bleiben vollständig erhalten.
   ========================================================= */
html body.ui-design-v31 #pageTitleBar{
    display:none !important;
}
/* === Ende ausgeblendete Seitenüberschrift === */

/* =========================================================
   V32.2 – Gesperrte Elemente ohne sichtbare Sperrkontur
   Die Sperre bleibt funktional vollständig erhalten.
   ========================================================= */
html body.ui-design-v31 .item.locked{
    outline-color:transparent !important;
}
/* === Ende Sperrkontur-Fix === */

/* =========================================================
   V32.7 – Helle Seitenleisten links und rechts
   Linke Seite vollständig durchgehend hinterlegt.
   ========================================================= */
html body.ui-design-v31 .pages-panel,
html body.ui-design-v31 .pages-panel .left-tools,
html body.ui-design-v31 .pages-panel .tool-popup-stack,
html body.ui-design-v31 .pages-panel .pages-section,
html body.ui-design-v31 .properties{
    background:#e6e8eb !important;
    color:#20252a !important;
}

/* Linke Leiste wirklich als eine durchgehende Fläche darstellen. */
html body.ui-design-v31 .pages-panel .left-tools{
    background-color:#e6e8eb !important;
}

html body.ui-design-v31 .pages-panel .tool-popup-stack{
    background-color:#e6e8eb !important;
}

html body.ui-design-v31 .pages-panel .pages-section{
    background-color:#e6e8eb !important;
    flex:1 1 auto;
}

/* Beschriftungen wieder dunkel für gute Lesbarkeit. */
html body.ui-design-v31 .pages-panel .left-tools-title,
html body.ui-design-v31 .pages-panel .panel-head,
html body.ui-design-v31 .pages-panel .mini-label,
html body.ui-design-v31 .pages-panel .thumb-label,
html body.ui-design-v31 .properties h3,
html body.ui-design-v31 .properties label,
html body.ui-design-v31 .properties .property-help,
html body.ui-design-v31 .properties .micro,
html body.ui-design-v31 .properties .status-line{
    color:#20252a !important;
}

html body.ui-design-v31 .pages-panel{
    border-right-color:#c9cdd2 !important;
}

html body.ui-design-v31 .properties{
    border-left-color:#c9cdd2 !important;
}
/* === Ende helle Seitenleisten === */

/* =========================================================
   V33.4 – Ladehinweis mittig über der Arbeitsfläche
   ========================================================= */
html body.ui-design-v31 .page-loading-overlay{
    position:absolute;
    inset:0;
    z-index:850;
    display:flex;
    align-items:center;
    justify-content:center;
    pointer-events:none;
}

html body.ui-design-v31 .page-loading-overlay.hidden{
    display:none !important;
}

html body.ui-design-v31 .page-loading-box{
    padding:10px 16px;
    border:1px solid rgba(32,42,48,.22);
    border-radius:8px;
    background:rgba(255,255,255,.96);
    box-shadow:0 5px 18px rgba(0,0,0,.18);
    color:#20252a;
    font-family:inherit;
    font-size:13px;
    font-weight:600;
    line-height:1.2;
    white-space:nowrap;
}
/* === Ende Ladehinweis Arbeitsfläche === */

/* =========================================================
   V33.6 – Verschiebegriffe oben links und oben rechts
   ========================================================= */
html body.ui-design-v31 .item.selected .move-grip,
html body.ui-design-v31 .item.multi-selected .move-grip{
    display:block !important;
}

html body.ui-design-v31 .item .move-grip.move-grip-left{
    left:-8px !important;
    right:auto !important;
    top:-8px !important;
}

html body.ui-design-v31 .item .move-grip.move-grip-right{
    left:auto !important;
    right:-8px !important;
    top:-8px !important;
}

html body.ui-design-v31 .item.locked .move-grip{
    display:none !important;
}
/* === Ende doppelte Verschiebegriffe === */

/* =========================================================
   V33.8 – Seitenname mittig über dem Layout
   ========================================================= */
html body.ui-design-v31 .page-label{
    left:50% !important;
    right:auto !important;
    top:-26px !important;
    transform:translateX(-50%) !important;
    width:max-content;
    max-width:calc(100% - 16px);
    overflow:hidden;
    text-overflow:ellipsis;
    white-space:nowrap;
    text-align:center;
    font-weight:600;
}
/* === Ende Seitenname mittig === */

/* =========================================================
   V34.0 – PDF-Fortschritt im Erstellungsdialog
   ========================================================= */
html body.ui-design-v31 .direct-pdf-progress{
    margin:0 18px 14px;
    padding:12px 14px;
    border:1px solid #d6dadd;
    border-radius:8px;
    background:#f8f9fa;
    box-sizing:border-box;
}

html body.ui-design-v31 .direct-pdf-progress.hidden{
    display:none !important;
}

html body.ui-design-v31 .direct-pdf-progress-row{
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:12px;
    margin:0 0 5px;
    color:#20252a;
    font-size:12px;
}

html body.ui-design-v31 .direct-pdf-progress-row strong{
    min-width:44px;
    text-align:right;
    font-variant-numeric:tabular-nums;
}

html body.ui-design-v31 .direct-pdf-page-progress-head{
    margin-top:11px;
}

html body.ui-design-v31 .direct-pdf-progress progress{
    display:block;
    width:100%;
    height:12px;
    margin:0;
    accent-color:#20800d;
}

html body.ui-design-v31 .direct-pdf-progress-detail{
    min-height:16px;
    margin-top:7px;
    color:#5b646c;
    font-size:11px;
    line-height:1.35;
}
/* === Ende PDF-Fortschritt === */

/* =========================================================
   V34.3 – schnelle schematische Seitenübersicht
   ========================================================= */
html body.ui-design-v31 .fast-page-preview-dialog{
    width:min(96vw,1400px);
    max-width:96vw !important;
    height:min(92vh,960px);
    max-height:92vh;
    padding:0;
    border:0;
    border-radius:12px;
    overflow:hidden;
}

html body.ui-design-v31 .fast-page-preview-dialog::backdrop{
    background:rgba(18,23,29,.72);
}

html body.ui-design-v31 .fast-preview-shell{
    display:flex;
    flex-direction:column;
    width:100%;
    height:100%;
    min-height:0;
    background:#f2f4f6;
}

html body.ui-design-v31 .fast-preview-head{
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:16px;
    flex:0 0 auto;
    padding:14px 18px;
    border-bottom:1px solid #d8dde2;
    background:#fff;
}

html body.ui-design-v31 .fast-preview-head h2{
    margin:0 0 3px;
    font-size:18px;
}

html body.ui-design-v31 .fast-preview-head-actions{
    flex-wrap:nowrap;
}

html body.ui-design-v31 .fast-preview-overview-view,
html body.ui-design-v31 .fast-preview-detail-view{
    flex:1 1 auto;
    min-height:0;
    overflow:hidden;
}

html body.ui-design-v31 .fast-preview-overview-view{
    display:flex;
    flex-direction:column;
}

html body.ui-design-v31 .fast-preview-hint{
    flex:0 0 auto;
    display:flex;
    align-items:center;
    justify-content:center;
    flex-wrap:wrap;
    gap:10px 14px;
    padding:12px 16px;
    border-bottom:1px solid #cfd8cf;
    background:#f4f8f3;
    color:#26302a;
    font-size:14px;
    font-weight:600;
    text-align:center;
}

html body.ui-design-v31 .fast-preview-hint span{
    display:inline-flex;
    align-items:center;
    min-height:32px;
    padding:5px 10px;
    border:1px solid #b7c8b3;
    border-radius:8px;
    background:#fff;
    box-shadow:0 1px 2px rgba(0,0,0,.06);
}

html body.ui-design-v31 .fast-preview-hint b{
    margin-right:5px;
    color:#20800d;
    font-weight:800;
}

html body.ui-design-v31 .fast-preview-grid{
    display:grid;
    grid-template-columns:repeat(auto-fill,110px);
    justify-content:center;
    align-content:start;
    gap:20px 18px;
    flex:1 1 auto;
    min-height:0;
    padding:22px;
    overflow:auto;
    box-sizing:border-box;
}

html body.ui-design-v31 .fast-preview-card{
    position:relative;
    width:110px;
    min-width:0;
    cursor:grab;
    user-select:none;
}

html body.ui-design-v31 .fast-preview-card.fast-preview-dragging{
    opacity:.38;
    cursor:grabbing;
}

html body.ui-design-v31 .fast-preview-card.fast-preview-drop-before::before,
html body.ui-design-v31 .fast-preview-card.fast-preview-drop-after::after{
    content:"";
    position:absolute;
    top:0;
    bottom:24px;
    width:4px;
    border-radius:4px;
    background:#2b7cff;
    box-shadow:0 0 0 1px rgba(255,255,255,.9);
    z-index:20;
}

html body.ui-design-v31 .fast-preview-card.fast-preview-drop-before::before{
    left:-10px;
}

html body.ui-design-v31 .fast-preview-card.fast-preview-drop-after::after{
    right:-10px;
}

html body.ui-design-v31 .fast-preview-sheet{
    position:relative;
    width:100%;
    overflow:hidden;
    box-sizing:border-box;
    border:1px solid #c9cfd5;
    border-radius:2px;
    background:#fff;
    box-shadow:0 3px 10px rgba(0,0,0,.12);
}

html body.ui-design-v31 .fast-preview-card.active .fast-preview-sheet{
    outline:2px solid #20800d;
    outline-offset:2px;
}

html body.ui-design-v31 .fast-preview-page-number{
    position:absolute;
    right:4px;
    bottom:4px;
    z-index:900;
    min-width:16px;
    height:16px;
    padding:0 4px;
    border-radius:999px;
    background:rgba(255,255,255,.9);
    color:#333;
    box-shadow:0 1px 4px rgba(0,0,0,.16);
    font-size:9px;
    font-weight:700;
    line-height:16px;
    text-align:center;
}

html body.ui-design-v31 .fast-preview-card-label{
    margin-top:6px;
    overflow:hidden;
    color:#333;
    font-size:10px;
    line-height:1.25;
    text-align:center;
    text-overflow:ellipsis;
    white-space:nowrap;
}

html body.ui-design-v31 .fast-preview-schematic-item{
    position:absolute;
    box-sizing:border-box;
    transform-origin:center;
    overflow:hidden;
    pointer-events:none;
}

html body.ui-design-v31 .fast-preview-schematic-background{
    z-index:0 !important;
}

html body.ui-design-v31 .fast-preview-schematic-image{
    display:grid;
    place-items:center;
    border:1px solid rgba(100,110,120,.22);
    background:
      linear-gradient(135deg,rgba(185,191,197,.92),rgba(226,229,232,.95));
    color:rgba(80,89,97,.48);
    font-size:12px;
}

html body.ui-design-v31 .fast-preview-schematic-image.fast-preview-image-background{
    background:
      linear-gradient(135deg,#d7dce0,#eef0f2);
}

html body.ui-design-v31 .fast-preview-schematic-pdf{
    display:grid;
    place-items:center;
    border:1px solid rgba(120,80,80,.18);
    background:#e6e1e1;
    color:#8a6666;
    font-size:7px;
    font-weight:700;
}

html body.ui-design-v31 .fast-preview-schematic-text{
    padding:2px;
    background:rgba(246,247,248,.58);
}

html body.ui-design-v31 .fast-preview-text-lines{
    display:flex;
    flex-direction:column;
    gap:2px;
    width:100%;
    height:100%;
    padding:1px;
    box-sizing:border-box;
}

html body.ui-design-v31 .fast-preview-text-lines i{
    display:block;
    flex:0 0 2px;
    max-width:100%;
    border-radius:2px;
    background:rgba(68,76,83,.45);
}

html body.ui-design-v31 .fast-preview-schematic-shape{
    border:1px solid rgba(70,80,90,.14);
}

html body.ui-design-v31 .fast-preview-schematic-line{
    height:1px !important;
    min-height:1px;
    border-top:1px solid rgba(55,62,68,.62);
    overflow:visible;
}

html body.ui-design-v31 .fast-preview-schematic-table{
    border:1px solid rgba(70,78,86,.28);
    background:
      linear-gradient(to right,transparent 49%,rgba(80,88,96,.20) 50%,transparent 51%),
      linear-gradient(to bottom,transparent 49%,rgba(80,88,96,.20) 50%,transparent 51%),
      #f5f6f7;
    background-size:33.333% 100%,100% 25%,auto;
}

html body.ui-design-v31 .fast-preview-detail-view{
    display:flex;
    flex-direction:column;
}

html body.ui-design-v31 .fast-preview-detail-toolbar{
    display:grid;
    grid-template-columns:auto minmax(160px,1fr) auto;
    align-items:center;
    gap:14px;
    flex:0 0 auto;
    padding:10px 16px;
    border-bottom:1px solid #d8dde2;
    background:#f8f9fa;
    text-align:center;
}

html body.ui-design-v31 .fast-preview-detail-toolbar strong{
    display:block;
    overflow:hidden;
    text-overflow:ellipsis;
    white-space:nowrap;
}

html body.ui-design-v31 .fast-preview-detail-host{
    display:flex;
    align-items:center;
    justify-content:center;
    flex:1 1 auto;
    min-height:0;
    padding:22px;
    overflow:auto;
    box-sizing:border-box;
}

html body.ui-design-v31 .fast-preview-detail-page{
    position:relative;
    flex:0 0 auto;
    overflow:visible;
}

html body.ui-design-v31 .fast-preview-detail-page .page-stage{
    position:absolute !important;
    left:0;
    top:0;
    transform-origin:top left;
    box-shadow:0 8px 26px rgba(0,0,0,.22);
}

html body.ui-design-v31 .fast-preview-detail-page .page-label,
html body.ui-design-v31 .fast-preview-detail-page .guides,
html body.ui-design-v31 .fast-preview-detail-page .alignment-guide-layer,
html body.ui-design-v31 .fast-preview-detail-page .center-guide,
html body.ui-design-v31 .fast-preview-detail-page .snap-guide,
html body.ui-design-v31 .fast-preview-detail-page .layout-grid,
html body.ui-design-v31 .fast-preview-detail-page .bleed-zone,
html body.ui-design-v31 .fast-preview-detail-page .trim-outline,
html body.ui-design-v31 .fast-preview-detail-page .bleed-marker,
html body.ui-design-v31 .fast-preview-detail-page .bleed-marker-label,
html body.ui-design-v31 .fast-preview-detail-page .safety-zone,
html body.ui-design-v31 .fast-preview-detail-page .safety-line,
html body.ui-design-v31 .fast-preview-detail-page .safety-label,
html body.ui-design-v31 .fast-preview-detail-page .margin-guide,
html body.ui-design-v31 .fast-preview-detail-page .resize-handle,
html body.ui-design-v31 .fast-preview-detail-page .rotate-handle,
html body.ui-design-v31 .fast-preview-detail-page .rotation-angle-badge,
html body.ui-design-v31 .fast-preview-detail-page .move-grip,
html body.ui-design-v31 .fast-preview-detail-page .flow-badge,
html body.ui-design-v31 .fast-preview-detail-page .group-badge{
    display:none !important;
}

html body.ui-design-v31 .fast-preview-detail-page .item,
html body.ui-design-v31 .fast-preview-detail-page .page,
html body.ui-design-v31 .fast-preview-detail-page .page-stage{
    pointer-events:none !important;
}

html body.ui-design-v31 .fast-preview-detail-page .item.selected,
html body.ui-design-v31 .fast-preview-detail-page .item.multi-selected{
    outline:none !important;
}

@media(max-width:700px){
    html body.ui-design-v31 .fast-preview-grid{
        grid-template-columns:repeat(auto-fill,84px);
        gap:16px 12px;
        padding:14px 10px 24px;
    }

    html body.ui-design-v31 .fast-preview-card{
        width:84px;
    }

    html body.ui-design-v31 .fast-preview-detail-toolbar{
        grid-template-columns:1fr 1fr;
    }

    html body.ui-design-v31 .fast-preview-detail-toolbar > div{
        grid-column:1 / -1;
        grid-row:1;
    }

    html body.ui-design-v31 .fast-preview-detail-toolbar #fastPreviewPrevBtn{
        grid-column:1;
        grid-row:2;
    }

    html body.ui-design-v31 .fast-preview-detail-toolbar #fastPreviewNextBtn{
        grid-column:2;
        grid-row:2;
    }
}
/* === Ende schnelle Seitenübersicht V34.3 === */

/* =========================================================
   V34.4 – robuste Auswahl / schematische Detailvorschau
   ========================================================= */
html body.ui-design-v31 .fast-preview-detail-schematic-sheet{
    position:relative;
    box-sizing:border-box;
    overflow:hidden;
    border:1px solid #c9cfd5;
    background:#fff;
    box-shadow:0 8px 26px rgba(0,0,0,.22);
}

html body.ui-design-v31 .fast-preview-detail-schematic .fast-preview-page-number{
    font-size:11px;
}
/* === Ende V34.4 Fast-Preview-Fix === */

/* =========================================================
   V38.4 – Lade-/Thumbnail-Modal kompakter
   Gilt für „Seite wird geladen“ und „Echtes Thumbnail wird erstellt“.
   ========================================================= */
html body.ui-design-v31 dialog.thumbnail-progress-dialog{
    width:min(300px,calc(100vw - 24px)) !important;
    max-width:300px !important;
}
/* === Ende V38.4 Lade-/Thumbnail-Modal === */

/* =========================================================
   V38.5 – Produktauswahl und produktspezifische Hilfen
   ========================================================= */
html body.ui-design-v31 .startup-product-grid{
    grid-template-columns:repeat(3,minmax(0,1fr));
    gap:10px;
}

html body.ui-design-v31 .startup-product-choice{
    min-height:118px;
    padding:14px;
}

html body.ui-design-v31 .startup-product-choice span{
    font-size:10.5px;
}

html body.ui-design-v31 .startup-variant-wrap{
    margin:0 0 14px;
    padding:11px 12px;
    border:1px solid #d9e0e6;
    border-radius:10px;
    background:#f7f9fa;
}

html body.ui-design-v31 .startup-variant-label{
    margin:0 0 7px;
    color:#59636d;
    font-size:11px;
    font-weight:700;
}

html body.ui-design-v31 .startup-variant-grid{
    display:grid;
    grid-template-columns:repeat(3,minmax(0,1fr));
    gap:7px;
}

html body.ui-design-v31 .startup-variant-choice{
    min-width:0;
    min-height:36px;
    padding:7px 8px;
    border:1px solid #cfd7df;
    border-radius:7px;
    background:#fff;
    color:#26313d;
    font-size:11px;
    font-weight:600;
}

html body.ui-design-v31 .startup-variant-choice.active{
    border-color:#20800d !important;
    background:#edf6eb !important;
    color:#155d08 !important;
}

html body.ui-design-v31 .startup-format-grid{
    grid-template-columns:repeat(3,minmax(0,1fr));
}

html body.ui-design-v31 .startup-format-choice{
    min-height:155px;
    padding:14px;
}

html body.ui-design-v31 .startup-paper-icon.a6{
    width:48px;
    height:68px;
}

html body.ui-design-v31 .startup-paper-icon.dinlong{
    width:46px;
    height:96px;
}

html body.ui-design-v31 .product-type-info-wrap{
    margin:0 0 10px;
}

html body.ui-design-v31 .product-type-info-label{
    display:block;
    margin:0 0 4px;
    color:#4f5965;
    font-size:12px;
}

html body.ui-design-v31 .product-type-info{
    padding:7px 8px;
    border:1px solid #cfd5dc;
    border-radius:6px;
    background:#f7f9fa;
    color:#20252a;
    font-size:11px;
    font-weight:700;
    line-height:1.3;
}

/* Falz- und Bindungslinien sind reine Editorhilfen. */
html body.ui-design-v31 .product-guide{
    position:absolute;
    z-index:835;
    pointer-events:none;
}

html body.ui-design-v31 .product-guide-fold{
    top:0;
    bottom:0;
    border-left:1.5px dashed #8d5a00;
}

html body.ui-design-v31 .product-guide-fold > span{
    position:absolute;
    top:3mm;
    left:2mm;
    padding:1mm 1.6mm;
    border:1px solid rgba(141,90,0,.28);
    border-radius:2mm;
    background:rgba(255,249,232,.94);
    color:#704700;
    font-size:9px;
    font-weight:700;
    white-space:nowrap;
}

html body.ui-design-v31 .product-guide-binding{
    top:0;
    bottom:0;
    background:rgba(208,132,0,.09);
    border-color:rgba(141,90,0,.45);
    border-style:dashed;
}

html body.ui-design-v31 .product-guide-binding.left{
    left:0;
    border-right-width:1px;
}

html body.ui-design-v31 .product-guide-binding.right{
    right:0;
    border-left-width:1px;
}

html body.ui-design-v31 .product-guide-binding > span{
    position:absolute;
    top:3mm;
    left:50%;
    transform:translateX(-50%) rotate(-90deg);
    transform-origin:center;
    color:#704700;
    font-size:8px;
    font-weight:700;
    white-space:nowrap;
}

html body.ui-design-v31 .publication-preview-dialog .product-guide,
html body.ui-design-v31 .thumb-preview-page .product-guide,
html body.ui-design-v31 .fast-preview-detail-page .product-guide{
    display:none !important;
}

@media print{
    .product-guide{display:none !important;}
}

@media(max-width:760px){
    html body.ui-design-v31 .startup-product-grid,
    html body.ui-design-v31 .startup-format-grid{
        grid-template-columns:repeat(2,minmax(0,1fr));
    }
}

@media(max-width:520px){
    html body.ui-design-v31 .startup-product-grid,
    html body.ui-design-v31 .startup-format-grid,
    html body.ui-design-v31 .startup-variant-grid{
        grid-template-columns:1fr;
    }
}
/* === Ende V38.5 Produktauswahl === */

/* =========================================================
   V38.7 – horizontale Falzlinie für Einbruchfalz/Klappkarte im Hochformat
   ========================================================= */
html body.ui-design-v31 .product-guide-fold.horizontal{
    left:0;
    right:0;
    bottom:auto;
    height:0;
    border-left:0;
    border-top:1.5px dashed #8d5a00;
}

html body.ui-design-v31 .product-guide-fold.horizontal > span{
    top:2mm;
    left:3mm;
}
/* === Ende V38.7 Falzlinie Hochformat === */


/* =========================================================
   V38.8 – vorläufige Produktauswahl und korrekte Querformat-Symbole
   Flyer, Faltblatt und Karte bleiben vollständig implementiert und
   werden derzeit lediglich in der Produktauswahl ausgeblendet.
   ========================================================= */
html body.ui-design-v31 .startup-product-choice[data-start-product="flyer"],
html body.ui-design-v31 .startup-product-choice[data-start-product="fold"],
html body.ui-design-v31 .startup-product-choice[data-start-product="card"]{
    display:none !important;
}

/* Papier-Symbol entspricht jetzt auch optisch der gewählten Ausrichtung. */
html body.ui-design-v31 .startup-paper-icon.a4.landscape{
    width:99px;
    height:70px;
}

html body.ui-design-v31 .startup-paper-icon.a5.landscape{
    width:82px;
    height:58px;
}

html body.ui-design-v31 .startup-paper-icon.a6.landscape{
    width:68px;
    height:48px;
}

html body.ui-design-v31 .startup-paper-icon.dinlong.landscape{
    width:96px;
    height:46px;
}
/* === Ende V38.8 === */


/* =========================================================
   V39.1 – Seitenbereiche mehrfach duplizieren
   ========================================================= */
html body.ui-design-v31 dialog#duplicatePagesDialog{
    width:min(560px,90vw);
}

html body.ui-design-v31 .duplicate-pages-dialog-card{
    width:100%;
}

html body.ui-design-v31 .duplicate-pages-range-grid{
    display:grid;
    grid-template-columns:repeat(2,minmax(0,1fr));
    gap:10px;
}

html body.ui-design-v31 .duplicate-pages-range-grid label,
html body.ui-design-v31 .duplicate-pages-repeat-label{
    display:block;
    margin:0 0 12px;
    color:#4f5965;
    font-size:12px;
    font-weight:600;
}

html body.ui-design-v31 .duplicate-pages-range-grid select,
html body.ui-design-v31 .duplicate-pages-repeat-label input{
    width:100%;
    margin-top:6px;
}

html body.ui-design-v31 .duplicate-pages-repeat-label input{
    max-width:140px;
}

html body.ui-design-v31 .duplicate-pages-summary{
    margin-top:2px;
}

html body.ui-design-v31 .duplicate-pages-hint{
    margin:10px 0 0;
}

@media(max-width:520px){
    html body.ui-design-v31 .duplicate-pages-range-grid{
        grid-template-columns:1fr;
        gap:0;
    }
}
/* === Ende V39.1 === */


/* ============================================================
   V39.2 – Seitenübersicht: kompakter Kopf, deutlichere Bedienhinweise
   ============================================================ */

/* ============================================================
   V39.7 – Einfügelinie deckend und oberste Ebene
   ============================================================ */
html body.ui-design-v31 #pageThumbs .thumb{
    position:relative;
    overflow:visible;
}

html body.ui-design-v31 #pageThumbs .thumb.thumb-dragging{
    opacity:.46;
    transform:scale(.98);
}

html body.ui-design-v31 #pageThumbs .thumb.thumb-drop-before::before,
html body.ui-design-v31 #pageThumbs .thumb.thumb-drop-after::after{
    content:"";
    position:absolute;
    left:-7px;
    right:-7px;
    height:9px;
    z-index:99999;
    pointer-events:none;
    border-radius:999px;
    background:#20800d;
    opacity:1;
    box-shadow:0 0 0 3px #ffffff,0 0 0 6px #20800d;
}

html body.ui-design-v31 #pageThumbs .thumb.thumb-drop-before::before{
    top:-10px;
}

html body.ui-design-v31 #pageThumbs .thumb.thumb-drop-after::after{
    bottom:-10px;
}

@media(max-width:1199px){
    html body.ui-design-v31 #pageThumbs .thumb.thumb-drop-before::before,
    html body.ui-design-v31 #pageThumbs .thumb.thumb-drop-after::after{
        top:-7px;
        bottom:-7px;
        width:9px;
        height:auto;
        left:auto;
        right:auto;
    }

    html body.ui-design-v31 #pageThumbs .thumb.thumb-drop-before::before{
        left:-10px;
    }

    html body.ui-design-v31 #pageThumbs .thumb.thumb-drop-after::after{
        right:-10px;
    }
}
/* === Ende V39.7 === */

/* ============================================================
   V40.0 – WordArt / Texteffekte
   ============================================================ */
html body.ui-design-v31 .wordart-details{
    margin-top:12px;
    border:1px solid #cfd8cc;
    border-radius:9px;
    background:#f8fbf7;
    overflow:hidden;
}
html body.ui-design-v31 .wordart-details > summary{
    padding:10px 12px;
    cursor:pointer;
    font-weight:800;
    color:#1b5f12;
    background:#eef6ec;
    user-select:none;
}
html body.ui-design-v31 .wordart-details[open] > summary{
    border-bottom:1px solid #d8e2d5;
}
html body.ui-design-v31 .wordart-body{
    padding:11px 12px 13px;
}
html body.ui-design-v31 .wordart-manual{
    display:grid;
    gap:9px;
    margin-top:10px;
}
html body.ui-design-v31 .wordart-grid2,
html body.ui-design-v31 .wordart-grid3{
    display:grid;
    gap:8px;
}
html body.ui-design-v31 .wordart-grid2{grid-template-columns:1fr 1fr}
html body.ui-design-v31 .wordart-grid3{grid-template-columns:repeat(3,1fr)}
html body.ui-design-v31 .wordart-grid2 label,
html body.ui-design-v31 .wordart-grid3 label{min-width:0}
html body.ui-design-v31 .wordart-grid2 input,
html body.ui-design-v31 .wordart-grid3 input,
html body.ui-design-v31 .wordart-grid2 select{width:100%;min-width:0}
html body.ui-design-v31 .wordart-switch{margin:2px 0 0}
html body.ui-design-v31 .wordart-actions{margin-top:2px}
html body.ui-design-v31 .wordart-actions button{width:100%}
html body.ui-design-v31 .wordart-note{
    margin:1px 0 0;
    padding:7px 8px;
    border-radius:6px;
    background:#fff;
    color:#5c6559;
    line-height:1.3;
}

/* Ganze Textbox erhält den WordArt-Effekt, ohne Rich-Text-Daten zu verändern. */
html body.ui-design-v31 .item.wordart-active > .content,
html body.ui-design-v31 .item.wordart-active > .content *{
    -webkit-text-stroke-width:var(--wordart-stroke-width,0px) !important;
    -webkit-text-stroke-color:var(--wordart-stroke-color,#000) !important;
    paint-order:stroke fill !important;
    text-shadow:var(--wordart-shadow,none) !important;
}
html body.ui-design-v31 .item.wordart-fill-solid > .content,
html body.ui-design-v31 .item.wordart-fill-solid > .content *{
    color:var(--wordart-fill-1,#fff) !important;
    -webkit-text-fill-color:var(--wordart-fill-1,#fff) !important;
}
html body.ui-design-v31 .item.wordart-fill-gradient > .content{
    color:transparent !important;
    -webkit-text-fill-color:transparent !important;
    background-image:linear-gradient(var(--wordart-gradient-angle,90deg),var(--wordart-fill-1,#fff),var(--wordart-fill-2,#20800d)) !important;
    background-clip:text !important;
    -webkit-background-clip:text !important;
}
html body.ui-design-v31 .item.wordart-fill-gradient > .content *{
    color:transparent !important;
    -webkit-text-fill-color:transparent !important;
}

html body.ui-design-v31 .wordart-warp-overlay{
    position:absolute;
    inset:0;
    z-index:25;
    pointer-events:none;
    overflow:visible;
    display:none;
}
html body.ui-design-v31 .wordart-warp-overlay svg{
    display:block;
    width:100%;
    height:100%;
    overflow:visible;
}
html body.ui-design-v31 .item.wordart-warped:not(.editing) > .wordart-warp-overlay{
    display:block !important;
}
html body.ui-design-v31 .item.wordart-warped:not(.editing) > .content,
html body.ui-design-v31 .item.wordart-warped:not(.editing) > .content *{
    color:transparent !important;
    -webkit-text-fill-color:transparent !important;
    -webkit-text-stroke:0 transparent !important;
    text-shadow:none !important;
    background-image:none !important;
}
html body.ui-design-v31 .item.wordart-warped.editing > .wordart-warp-overlay{
    display:none !important;
}

@media(max-width:1199px){
    html body.ui-design-v31 .wordart-grid3{grid-template-columns:1fr 1fr 1fr}
}
@media(max-width:767px){
    html body.ui-design-v31 .wordart-grid2,
    html body.ui-design-v31 .wordart-grid3{grid-template-columns:1fr}
}
@media print{
    html body.ui-design-v31 .wordart-details{display:none!important}
}
/* === Ende V40.0 === */


/* ============================================================
   V40.8 – Reglerwerte direkt im angezeigten Wert editieren
   ============================================================ */
html body.ui-design-v31 .inline-editable-range-value{
    cursor:text;
    white-space:nowrap;
    user-select:none;
    -webkit-user-select:none;
    text-decoration-line:underline;
    text-decoration-style:dotted;
    text-decoration-color:transparent;
    text-underline-offset:3px;
    transition:text-decoration-color .12s ease,color .12s ease;
}
html body.ui-design-v31 .inline-editable-range-value:hover,
html body.ui-design-v31 .inline-editable-range-value:focus-visible{
    text-decoration-color:rgba(32,128,13,.72);
}
html body.ui-design-v31 .inline-editable-range-value.is-editing{
    cursor:text;
    user-select:text;
    -webkit-user-select:text;
    outline:none;
    background:transparent;
    border:0;
    box-shadow:none;
    color:#145708;
    text-decoration-style:solid;
    text-decoration-color:#20800d;
}
/* === Ende V40.8 === */


/* ============================================================
   V40.10 – kleine direkte Zahlenfelder für Textabstände
   ============================================================ */
html body.ui-design-v31 .range-number-box{
    width:58px;
    min-width:58px;
    height:26px;
    display:inline-flex;
    align-items:center;
    justify-content:flex-end;
    gap:2px;
    padding:0 5px;
    box-sizing:border-box;
    border:1px solid #c9d0d6;
    border-radius:5px;
    background:#fff;
    color:#4f5965;
    transition:border-color .12s ease,box-shadow .12s ease;
}
html body.ui-design-v31 .range-number-box:focus-within{
    border-color:#20800d;
    box-shadow:0 0 0 2px rgba(32,128,13,.12);
}
html body.ui-design-v31 .range-number-input{
    width:100%;
    min-width:0;
    height:22px;
    padding:0;
    border:0!important;
    outline:0!important;
    box-shadow:none!important;
    background:transparent!important;
    color:#39434d;
    font:inherit;
    font-size:11px;
    font-variant-numeric:tabular-nums;
    text-align:right;
}
html body.ui-design-v31 .range-number-input:focus{
    color:#145708;
}
html body.ui-design-v31 .range-number-unit{
    flex:0 0 auto;
    font-size:10px;
    color:#6b747d;
    line-height:1;
    pointer-events:none;
}
/* === Ende V40.10 === */


/* ============================================================
   V40.11 – gespeicherte Textmarkierung bei Zahleneingabe sichtbar
   ============================================================ */
::highlight(zd-preserved-text-selection){
    background:rgba(32,128,13,.30);
    color:inherit;
}
/* === Ende V40.11 === */

/* ============================================================
   V40.13 – exakte Textabstände mit Minus/Plus statt Slider
   ============================================================ */
html body.ui-design-v31 .text-stepper-control{
    display:grid;
    grid-template-columns:32px minmax(62px,1fr) 32px;
    align-items:center;
    gap:6px;
    width:100%;
    margin-top:4px;
}
html body.ui-design-v31 .text-stepper-btn{
    width:32px;
    min-width:32px;
    height:30px;
    min-height:30px;
    padding:0;
    display:grid;
    place-items:center;
    border:1px solid #bfc7ce;
    border-radius:6px;
    background:#fff;
    color:#26313a;
    font-size:20px;
    font-weight:700;
    line-height:1;
    cursor:pointer;
    user-select:none;
    -webkit-user-select:none;
}
html body.ui-design-v31 .text-stepper-btn:hover{
    border-color:#20800d;
    background:#f2f8f0;
    color:#145708;
}
html body.ui-design-v31 .text-stepper-btn:active{
    background:#e2f1df;
}
html body.ui-design-v31 .text-stepper-value{
    min-width:0;
    padding:0 6px;
    color:#39434d;
    font-size:12px;
    font-weight:700;
    font-variant-numeric:tabular-nums;
    text-align:center;
    white-space:nowrap;
}
/* === Ende V40.13 === */

/* ============================================================
   V40.16 – vergrößerter Text-Fokusmodus
   ============================================================ */
html body.ui-design-v31 .item.text > .text-focus-handle{
    display:none;
    position:absolute;
    left:-10px;
    bottom:-10px;
    width:30px;
    height:30px;
    min-width:30px;
    min-height:30px;
    padding:0;
    z-index:1800;
    align-items:center;
    justify-content:center;
    border:2px solid #fff;
    border-radius:50%;
    background:#20800d;
    color:#fff;
    box-shadow:0 2px 8px rgba(0,0,0,.30);
    font-size:15px;
    line-height:1;
    cursor:pointer;
    user-select:none;
    -webkit-user-select:none;
}
html body.ui-design-v31 .item.text.selected > .text-focus-handle,
html body.ui-design-v31 .item.text.editing > .text-focus-handle{
    display:flex;
}
html body.ui-design-v31 .item.text > .text-focus-handle:hover{
    background:#145708;
    transform:scale(1.08);
}
html body.ui-design-v31 .item.text.locked > .text-focus-handle{
    display:none!important;
}

html body.ui-design-v31 .text-focus-overlay{
    position:fixed;
    z-index:5000;
    overflow:hidden;
    pointer-events:auto;
}
html body.ui-design-v31.text-focus-mode #propertiesPanel{
    z-index:5100!important;
}
html body.ui-design-v31 .text-focus-overlay.hidden{
    display:none!important;
}
html body.ui-design-v31 .text-focus-backdrop{
    position:absolute;
    inset:0;
    background:rgba(31,39,45,.62);
    backdrop-filter:blur(2px);
}
html body.ui-design-v31 .text-focus-window{
    position:absolute;
    inset:16px;
    display:flex;
    flex-direction:column;
    min-width:0;
    min-height:0;
    overflow:hidden;
    border:1px solid rgba(0,0,0,.20);
    border-radius:12px;
    background:#eef1f3;
    box-shadow:0 12px 42px rgba(0,0,0,.34);
}
html body.ui-design-v31 .text-focus-head{
    flex:0 0 auto;
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:12px;
    min-height:54px;
    padding:8px 10px 8px 14px;
    box-sizing:border-box;
    border-bottom:4px solid #20800d;
    background:#fff;
    color:#1c252c;
}
html body.ui-design-v31 .text-focus-head > div{
    min-width:0;
    display:flex;
    flex-direction:column;
    gap:2px;
}
html body.ui-design-v31 .text-focus-head b{
    font-size:14px;
    line-height:1.2;
}
html body.ui-design-v31 .text-focus-head span{
    color:#68727b;
    font-size:10.5px;
    line-height:1.2;
}
html body.ui-design-v31 .text-focus-close{
    flex:0 0 34px;
    width:34px;
    height:34px;
    min-width:34px;
    min-height:34px;
    padding:0;
    display:grid;
    place-items:center;
    border:0;
    border-radius:7px;
    background:#111;
    color:#fff;
    font-size:25px;
    font-weight:400;
    line-height:1;
    cursor:pointer;
}
html body.ui-design-v31 .text-focus-close:hover{
    background:#20800d;
}
html body.ui-design-v31 .text-focus-scroll{
    position:relative;
    flex:1 1 auto;
    min-width:0;
    min-height:0;
    overflow:auto;
    padding:46px;
    box-sizing:border-box;
}
html body.ui-design-v31 .text-focus-stage{
    position:relative;
    margin:auto;
    box-sizing:content-box;
}
html body.ui-design-v31 .text-focus-item{
    box-sizing:border-box;
    margin:0!important;
    user-select:none;
    box-shadow:0 5px 22px rgba(0,0,0,.18);
}
html body.ui-design-v31 .text-focus-item > .content[contenteditable="true"]{
    cursor:text;
}
html body.ui-design-v31 .text-focus-item::after{
    content:"";
    position:absolute;
    inset:0;
    pointer-events:none;
    box-shadow:inset 0 0 0 1px rgba(224,161,0,.30);
}

/* Fokus-Hilfen niemals in Vorschau, Thumbnail oder Ausgabe zeigen. */
html body.ui-design-v31 .publication-preview-dialog .text-focus-handle,
html body.ui-design-v31 .thumb-preview-page .text-focus-handle,
html body.ui-design-v31 .fast-preview-detail-page .text-focus-handle,
html body.ui-design-v31 #zdPrintHost .text-focus-handle,
html body.ui-design-v31 #zdDirectPdfHost .text-focus-handle{
    display:none!important;
}
@media(max-width:767px){
    html body.ui-design-v31 .text-focus-window{inset:8px}
    html body.ui-design-v31 .text-focus-scroll{padding:28px 22px}
    html body.ui-design-v31 .text-focus-head span{display:none}
}
@media print{
    html body.ui-design-v31 .text-focus-overlay,
    html body.ui-design-v31 .text-focus-handle{display:none!important}
}
/* === Ende V40.16 === */