/* =========================================================
   Native Tools - Word -> HTML lazy module CSS
   ========================================================= */

.native-word-html-tool {
    display: grid;
    gap: 14px;
}
.native-word-html-file-label {
    cursor: pointer;
}
.native-word-html-grid {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    gap: 14px;
}
.native-word-html-editor {
    min-height: 520px;
    max-height: 70vh;
    overflow: auto;
    padding: 18px;
    border-radius: 14px;
    border: 1px solid var(--tools-border);
    outline: none;
}
.native-word-html-editor:focus {
    border-color: var(--tools-accent);
    box-shadow: 0 0 0 3px rgba(233, 166, 36, .16);
}
.native-word-html-preview {
    min-height: 190px;
    max-height: 340px;
    overflow: auto;
    padding: 14px;
    border-radius: 14px;
    border: 1px solid var(--tools-border);
    background: #fff;
    color: #111;
    line-height: 1.55;
}
.native-word-html-preview table,
.native-word-html-editor table {
    border-collapse: collapse;
}
.native-word-html-preview td,
.native-word-html-preview th,
.native-word-html-editor td,
.native-word-html-editor th {
    border: 1px solid #999;
    padding: 4px 6px;
}
@media (max-width: 1050px) {
.native-color-picker-layout,
    .native-word-html-grid {
        grid-template-columns: 1fr;
    }
.native-word-html-editor {
        min-height: 360px;
    }
}
/* =========================================================
   Word to HTML - Textfarbe, keine doppelte Vorschau, Lesbarkeit
   ========================================================= */
.native-word-html-color-label {
    border: 1px solid var(--tools-border);
    background: rgba(255, 255, 255, .055);
    color: var(--tools-text);
    font-size: 13px;
    font-weight: 900;
}
.native-word-html-color-label input[type="color"] {
    cursor: pointer;
}
.native-word-html-editor {
    background: #ffffff;
    color: #111111;
    caret-color: #111111;
    line-height: 1.55;
}
.native-word-html-editor p,
.native-word-html-editor div,
.native-word-html-editor li,
.native-word-html-editor td,
.native-word-html-editor th,
.native-word-html-editor h1,
.native-word-html-editor h2,
.native-word-html-editor h3,
.native-word-html-editor h4,
.native-word-html-editor h5,
.native-word-html-editor h6 {
    color: #111111;
}
.native-word-html-editor a {
    color: #0b62c0;
}
.native-word-html-editor strong,
.native-word-html-editor b {
    color: inherit;
    font-weight: 800;
}
.native-word-html-editor em,
.native-word-html-editor i {
    color: inherit;
}
.native-word-html-editor:empty::before {
    content: "";
    color: #666666;
}
.native-word-html-output {
    font-family: Consolas, Monaco, 'Courier New', monospace;
}
body.light-mode .native-word-html-toolbar,
body.light-mode .native-word-html-color-label {
    background: rgba(255, 255, 255, .72);
    border-color: rgba(0, 0, 0, .14);
}
.native-word-html-preview {
    display: none;
}

/* =========================================================
   Word to HTML - erweiterte Toolbar + Dark/Light Lesbarkeit
   ========================================================= */
.native-word-html-toolgroup {
    border: 1px solid var(--tools-border);
    border-radius: 14px;
    background: rgba(255, 255, 255, .045);
}
.native-word-html-toolgroup>span {
    color: var(--tools-muted);
    font-size: 11px;
    font-weight: 950;
    text-transform: uppercase;
    letter-spacing: .07em;
}
.native-word-html-toolgroup .native-tools-btn {
    min-height: 34px;
    padding: 7px 10px;
}
html:not(.light-mode) body:not(.light-mode) .native-word-html-editor {
    border-color: rgba(255, 255, 255, .16);
}
html:not(.light-mode) body:not(.light-mode) .native-word-html-editor a {
    color: #7ab7ff;
}
body.light-mode .native-word-html-editor {
    background: #ffffff;
    color: #111827;
    caret-color: #111827;
    border-color: rgba(0, 0, 0, .18);
}
body.light-mode .native-word-html-editor p,
body.light-mode .native-word-html-editor div,
body.light-mode .native-word-html-editor li,
body.light-mode .native-word-html-editor td,
body.light-mode .native-word-html-editor th,
body.light-mode .native-word-html-editor h1,
body.light-mode .native-word-html-editor h2,
body.light-mode .native-word-html-editor h3,
body.light-mode .native-word-html-editor h4,
body.light-mode .native-word-html-editor h5,
body.light-mode .native-word-html-editor h6 {
    color: #111827;
}
.native-word-html-editor img {
    max-width: 100%;
    height: auto;
}
.native-word-html-editor.is-dragover {
    outline: 3px dashed var(--tools-accent);
    outline-offset: -10px;
    background-image: linear-gradient(135deg, rgba(233, 166, 36, .14), rgba(233, 166, 36, .04));
}
.native-word-html-editor table {
    margin: 8px 0;
    width: auto;
}
.native-word-html-editor td,
.native-word-html-editor th {
    min-width: 70px;
}
body.light-mode .native-word-html-toolgroup {
    background: rgba(255, 255, 255, .72);
    border-color: rgba(0, 0, 0, .14);
}

/* =========================================================
   Word to HTML - Toolbar Feinschliff + HTML Code Editor
   ========================================================= */

.native-word-html-toolgroup-text {
    align-items: center;
}
.native-word-html-toolgroup-color {
    align-items: center;
}
.native-word-html-toolgroup-color .native-word-html-color-label {
    margin: 0;
}
.native-word-html-toolgroup-color .native-tools-btn {
    align-self: flex-end;
}
.native-word-html-size {
    background-color: rgba(13, 17, 23, .88);
    appearance: auto;
}
.native-word-html-size:focus {
    outline: none;
    border-color: var(--tools-accent) !important;
    box-shadow: 0 0 0 3px rgba(233, 166, 36, .16);
}
body.light-mode .native-word-html-size {
    background-color: #ffffff;
}
.native-word-html-color-label {
    grid-template-columns: auto 1fr;
}
.native-word-html-color-label strong {
    color: var(--tools-text);
    font-weight: 900;
}
html:not(.light-mode) body:not(.light-mode) .native-word-html-editor {
    background: #0b0f14;
    color: #f8fafc;
    caret-color: #f8fafc;
}
html:not(.light-mode) body:not(.light-mode) .native-word-html-editor p,
html:not(.light-mode) body:not(.light-mode) .native-word-html-editor div,
html:not(.light-mode) body:not(.light-mode) .native-word-html-editor li,
html:not(.light-mode) body:not(.light-mode) .native-word-html-editor td,
html:not(.light-mode) body:not(.light-mode) .native-word-html-editor th,
html:not(.light-mode) body:not(.light-mode) .native-word-html-editor h1,
html:not(.light-mode) body:not(.light-mode) .native-word-html-editor h2,
html:not(.light-mode) body:not(.light-mode) .native-word-html-editor h3,
html:not(.light-mode) body:not(.light-mode) .native-word-html-editor h4,
html:not(.light-mode) body:not(.light-mode) .native-word-html-editor h5,
html:not(.light-mode) body:not(.light-mode) .native-word-html-editor h6 {
    color: #f8fafc;
}
.native-word-html-highlight,
.native-word-html-output {
    background: transparent;
}
@media (max-width: 1050px) {
.native-word-html-code-editor {
        min-height: 360px;
    }
.native-word-html-output {
        min-height: 360px;
    }
}
/* =========================================================
   Word to HTML - Icon Toolbar + lesbarer HTML Editor
   ========================================================= */
.native-word-html-toolgroup>span {
    margin-bottom: 3px;
}
.native-word-icon-btn {
    padding: 0;
    display: inline-grid;
    place-items: center;
    border-radius: 10px;
    font-size: 15px;
    line-height: 1;
    font-weight: 900;
}
.native-word-icon-btn:hover,
.native-word-icon-btn:focus-visible {
    transform: translateY(-1px);
}
.native-word-html-file-label.native-word-icon-btn {
    cursor: pointer;
}
.native-word-html-color-label {
    display: inline-flex;
    flex-direction: row;
    align-items: center;
    gap: 8px;
    padding: 5px 8px;
    border-radius: 10px;
}
.native-word-html-color-label strong {
    white-space: nowrap;
    font-size: 12px;
}
.native-word-html-color-label input[type="color"] {
    width: 34px;
    height: 24px;
    min-height: 24px;
    padding: 1px;
    border-radius: 7px;
}
.native-word-html-code-editor {
    border-color: rgba(255, 255, 255, .14);
}
.native-word-html-lines {
    padding-top: 14px;
}
.native-word-html-output {
    font-size: 13px;
    line-height: 1.45;
    border-left: 0;
}
body.light-mode .native-word-html-output {
    background: #ffffff;
    color: #24292f;
    -webkit-text-fill-color: #24292f;
}
.native-word-html-editor {
    font-size: 15px;
}
@media (max-width: 900px) {
.native-word-html-toolbar {
        grid-template-columns: 1fr;
    }
.native-word-html-toolgroup {
        width: 100%;
    }
}
/* =========================================================
   Word to HTML - Syntax Highlighting + Toolbar-Ausrichtung
   ========================================================= */
.native-word-html-toolgroup>span {
    align-items: center;
}
.native-word-html-toolgroup .native-word-icon-btn,
.native-word-html-toolgroup .native-word-html-file-label,
.native-word-html-toolgroup .native-word-html-size,
.native-word-html-toolgroup .native-word-html-color-label {
    align-self: center;
}
.native-word-icon-btn {
    height: 36px;
    min-height: 36px;
    width: 38px;
    min-width: 38px;
}
.native-word-html-color-label {
    height: 36px;
    min-height: 36px;
}
/* Code-Editor Overlay:
   Textarea bleibt editierbar, sichtbarer Text kommt vom Highlight-Layer darunter. */
.native-word-html-code-editor {
    position: relative;
}
.native-word-html-lines {
    z-index: 4;
}
.native-word-html-highlight,
.native-word-html-output {
    grid-column: 2;
    grid-row: 1;
    margin: 0;
    padding: 14px;
    border: 0;
    border-radius: 0;
    font-family: Consolas, Monaco, 'Courier New', monospace !important;
    font-size: 13px !important;
    line-height: 1.45;
    tab-size: 2;
    white-space: pre;
    overflow: auto;
}
.native-word-html-highlight {
    display: block;
    opacity: 1;
    position: relative;
    z-index: 1;
    pointer-events: none;
    background: #25282e;
    color: #d7dde8;
    min-height: 540px;
}
.native-word-html-output {
    position: relative;
    z-index: 3;
    width: 100%;
    height: 100%;
    min-height: 540px !important;
    max-height: 70vh;
    resize: none;
    background: transparent;
    color: transparent;
    -webkit-text-fill-color: transparent;
    caret-color: #ffffff;
    outline: none;
    box-shadow: none;
}
.native-word-html-output::selection {
    -webkit-text-fill-color: transparent;
}
.native-word-html-output:focus {
    box-shadow: inset 0 0 0 2px rgba(233, 166, 36, .32) !important;
}
/* VSCode/GitHub-Dark-ähnliche Farben */
.native-word-html-highlight .html-tag {
    color: #7ee787;
}
.native-word-html-highlight .html-attr {
    color: #79c0ff;
}
.native-word-html-highlight .html-string {
    color: #a5d6ff;
}
.native-word-html-highlight .html-bracket {
    color: #ff7b72;
}
.native-word-html-highlight .html-comment {
    color: #8b949e;
    font-style: italic;
}
/* Fallback für Text außerhalb von Tags */
.native-word-html-highlight {
    text-shadow: none;
}
body.light-mode .native-word-html-highlight {
    background: #ffffff;
    color: #24292f;
}
body.light-mode .native-word-html-output {
    caret-color: #111827;
}
body.light-mode .native-word-html-highlight .html-tag {
    color: #116329;
}
body.light-mode .native-word-html-highlight .html-attr {
    color: #0550ae;
}
body.light-mode .native-word-html-highlight .html-string {
    color: #0a3069;
}
body.light-mode .native-word-html-highlight .html-bracket {
    color: #cf222e;
}
body.light-mode .native-word-html-highlight .html-comment {
    color: #6e7781;
}


/* =========================================================
   Word to HTML - sichtbares Syntax-Highlighting + gleiche Toolbar-Höhe
   ========================================================= */
.native-word-html-toolgroup {
    align-self: stretch;
}
.native-word-html-code-editor {
    display: grid;
    grid-template-columns: 54px minmax(0, 1fr);
    min-height: 540px;
    max-height: 70vh;
    overflow: hidden;
    border: 1px solid rgba(255, 255, 255, .14);
    border-radius: 14px;
    background: #0d1117;
}
.native-word-html-lines {
    grid-column: 1;
    grid-row: 1;
    padding: 14px 10px 14px 0;
    border-right: 1px solid rgba(255, 255, 255, .08);
    font-family: Consolas, Monaco, 'Courier New', monospace;
    font-size: 13px;
    line-height: 1.45;
    text-align: right;
    white-space: pre;
    user-select: none;
}
.native-word-html-code {
    grid-column: 2;
    grid-row: 1;
    min-height: 540px;
    max-height: 70vh;
    margin: 0;
    padding: 14px;
    border: 0;
    outline: none;
    white-space: pre;
    tab-size: 2;
    font-family: Consolas, Monaco, 'Courier New', monospace;
    font-size: 13px;
    line-height: 1.45;
    caret-color: #ffffff;
}
.native-word-html-code:focus {
    box-shadow: inset 0 0 0 2px rgba(233, 166, 36, .34);
}
.native-word-html-output,
.native-word-html-highlight {
    display: none;
}
body.light-mode .native-word-html-code-editor {
    background: #f6f8fa;
    border-color: rgba(0, 0, 0, .14);
}
body.light-mode .native-word-html-lines {
    border-right-color: rgba(0, 0, 0, .12);
}
body.light-mode .native-word-html-code {
    caret-color: #111827;
}
@media (max-width: 1050px) {
.native-word-html-toolbar {
        grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
        grid-auto-rows: auto;
    }
.native-word-html-toolgroup {
        height: auto;
        max-height: none;
        min-height: 88px;
    }
}

/* =========================================================
   Word to HTML - Toolbar Polishing + kräftigeres Syntax Highlighting
   ========================================================= */

.native-word-html-toolbar {
    grid-auto-rows: 96px;
}
.native-word-html-toolgroup .native-word-icon-btn,
.native-word-html-toolgroup .native-word-html-file-label,
.native-word-html-toolgroup .native-word-html-size,
.native-word-html-toolgroup .native-word-html-color-only {
    grid-row: 2;
    align-self: center;
    justify-self: start;
}
.native-word-icon-btn,
.native-word-html-file-label.native-word-icon-btn {
    font-size: 15px;
    font-weight: 950;
    border-radius: 10px !important;
    vertical-align: middle;
}
.native-word-icon-btn img,
.native-word-icon-btn svg {
    display: block;
    width: 18px;
    height: 18px;
}
.native-word-html-size {
    padding: 0 28px 0 12px;
    border-radius: 10px;
    border: 1px solid rgba(242, 166, 30, .75);
    background: #f2a61e;
    color: #111111;
    font-size: 13px;
    font-weight: 950;
    line-height: 38px;
    box-shadow: none;
}
.native-word-html-size:hover,
.native-word-html-size:focus {
    background: #ffb42a !important;
    border-color: #ffcc62 !important;
    color: #111111 !important;
    outline: none !important;
    box-shadow: 0 0 0 3px rgba(242, 166, 30, .18) !important;
}
.native-word-html-color-label,
.native-word-html-color-label strong {
    display: none;
}
.native-word-html-color-only {
    border: 1px solid rgba(242, 166, 30, .75);
    border-radius: 10px;
    background: transparent;
    box-shadow: none;
    cursor: pointer;
    box-sizing: border-box;
}
.native-word-html-color-only::-webkit-color-swatch-wrapper {
    padding: 0;
}
.native-word-html-color-only::-webkit-color-swatch {
    border: 0;
    border-radius: 7px;
}
.native-word-html-color-only::-moz-color-swatch {
    border: 0;
    border-radius: 7px;
}
/* kräftigeres, besser lesbares Syntax-Highlighting */
.native-word-html-code {
    background: #1f232b;
    color: #ffffff;
    font-weight: 650;
}
.native-word-html-lines {
    color: #a6b5c8;
    background: #0b0e14;
}
body.light-mode .native-word-html-code {
    background: #ffffff;
    color: #111827;
    font-weight: 600;
}
body.light-mode .native-word-html-code .html-tag {
    font-weight: 900;
}
body.light-mode .native-word-html-code .html-attr {
    font-weight: 850;
}
body.light-mode .native-word-html-code .html-string {
    font-weight: 850;
}
body.light-mode .native-word-html-code .html-bracket {
    font-weight: 900;
}
body.light-mode .native-word-html-lines {
    color: #59636e;
    background: #f0f3f6;
}
body.light-mode .native-word-html-size {
    background: #f2a61e;
    color: #111111;
    border-color: rgba(177, 112, 0, .45);
}
@media (max-width: 1500px) {
.native-word-html-toolbar {
        grid-auto-rows: auto;
    }
.native-word-html-toolgroup {
        height: auto;
        min-height: 92px;
        max-height: none;
    }
}
@media (max-width: 700px) {
.native-word-html-toolbar {
        grid-template-columns: 1fr;
    }
.native-word-html-toolgroup,
    .native-word-html-toolgroup-text,
    .native-word-html-toolgroup-color {
        min-width: 0;
        width: 100%;
    }
}
/* =========================================================
   Word to HTML - Farbe-Höhe fix + Schriftgröße/Schriftart
   ========================================================= */

.native-word-html-toolbar {
    grid-template-columns:
        minmax(500px, max-content) minmax(96px, max-content) minmax(250px, max-content) minmax(128px, max-content) minmax(180px, max-content) minmax(250px, max-content);
}
.native-word-html-toolgroup {
    place-content: start;
}
.native-word-html-toolgroup-color {
    column-gap: 8px;
}
.native-word-html-toolgroup-color>span {
    grid-column: 1 / -1;
}
.native-word-html-color-only,
.native-word-html-toolgroup-color .native-word-icon-btn {
    width: 38px;
    height: 38px;
    min-width: 38px;
    min-height: 38px;
    max-width: 38px;
    max-height: 38px;
    align-self: center;
    justify-self: center;
    margin: 0;
}
.native-word-html-toolgroup .native-word-icon-btn:last-child,
.native-word-html-toolgroup .native-word-html-file-label:last-child {
    align-self: center;
    justify-self: center;
    margin: 0;
    transform: none;
    vertical-align: middle;
}
.native-word-html-toolgroup .native-word-html-file-label {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    line-height: 1;
}
.native-word-html-size,
.native-word-html-font {
    padding: 0 28px 0 12px;
    border-radius: 10px !important;
    border: 1px solid rgba(242, 166, 30, .75);
    background: #f2a61e;
    color: #111111;
    font-size: 13px !important;
    font-weight: 950 !important;
    box-shadow: none;
    align-self: center;
}
.native-word-html-size:hover,
.native-word-html-size:focus,
.native-word-html-font:hover,
.native-word-html-font:focus {
    background: #ffb42a !important;
    border-color: #ffcc62 !important;
    color: #111111 !important;
    outline: none !important;
    box-shadow: 0 0 0 3px rgba(242, 166, 30, .18) !important;
}
body.light-mode .native-word-html-size,
body.light-mode .native-word-html-font {
    background: #f2a61e;
    color: #111111;
    border-color: rgba(177, 112, 0, .45);
}
@media (max-width: 1500px) {
.native-word-html-toolbar {
        grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
    }
.native-word-html-toolgroup-color {
        width: auto;
        min-width: 0;
    }
.native-word-html-toolgroup-text {
        min-width: 0;
    }
}
/* =========================================================
   Word to HTML - Dropdown-/Ausrichtungs-Fix
   ========================================================= */
.native-word-html-toolgroup {
    flex-wrap: wrap;
}
.native-word-html-toolgroup>span {
    flex: 0 0 100%;
    display: block;
}
.native-word-icon-btn,
.native-word-html-file-label.native-word-icon-btn,
.native-word-html-color-only,
.native-word-html-size,
.native-word-html-font {
    align-self: center;
    margin: 0;
    transform: none;
    vertical-align: middle;
}
.native-word-icon-btn,
.native-word-html-file-label.native-word-icon-btn {
    width: 38px;
    min-width: 38px;
    max-width: 38px;
    height: 38px;
    min-height: 38px;
    max-height: 38px;
    padding: 0;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    line-height: 1;
    box-sizing: border-box;
}
.native-word-html-size,
.native-word-html-font {
    height: 38px;
    min-height: 38px;
    max-height: 38px;
    line-height: normal;
    padding-top: 0;
    padding-bottom: 0;
    display: inline-block;
    appearance: auto !important;
    box-sizing: border-box;
}
.native-word-html-color-only {
    width: 38px;
    min-width: 38px;
    max-width: 38px;
    height: 38px;
    min-height: 38px;
    max-height: 38px;
    padding: 2px;
}
/* Eindeutige Ausrichtungs-Icons */
.word-align-icon {
    width: 20px;
    height: 16px;
    display: flex;
    flex-direction: column;
    justify-content: center;
    gap: 3px;
}
.word-align-icon i {
    display: block;
    height: 2px;
    border-radius: 99px;
}
@media (max-width: 1500px) {
.native-word-html-toolgroup,
    .native-word-html-toolgroup-text,
    .native-word-html-toolgroup-color,
    .native-word-html-toolgroup:nth-child(3),
    .native-word-html-toolgroup:nth-child(4),
    .native-word-html-toolgroup:nth-child(5),
    .native-word-html-toolgroup:nth-child(6) {
        width: auto;
        min-width: 220px;
        max-width: none;
        height: auto;
        max-height: none;
        min-height: 90px;
    }
}
@media (max-width: 700px) {
.native-word-html-toolgroup,
    .native-word-html-toolgroup-text,
    .native-word-html-toolgroup-color,
    .native-word-html-toolgroup:nth-child(3),
    .native-word-html-toolgroup:nth-child(4),
    .native-word-html-toolgroup:nth-child(5),
    .native-word-html-toolgroup:nth-child(6) {
        width: 100%;
        min-width: 0;
    }
}
/* =========================================================
   Word to HTML - Font Dropdown + No-Wrap Toolbar
   ========================================================= */
.native-word-html-toolgroup {
    gap: 7px;
}
.native-word-html-toolgroup>span {
    min-height: 18px;
}
.native-word-html-font {
    font-weight: 900 !important;
}
.native-word-html-font option {
    color: #111111;
    background: #f2a61e;
    font-size: 14px;
    line-height: 1.6;
    padding: 6px 10px;
}
.native-word-html-size option {
    color: #111111;
    background: #f2a61e;
    font-size: 14px;
    font-weight: 900;
}
@media (max-width: 900px) {
.native-word-html-toolgroup,
    .native-word-html-toolgroup-text,
    .native-word-html-toolgroup-color,
    .native-word-html-toolgroup:nth-child(3),
    .native-word-html-toolgroup:nth-child(4),
    .native-word-html-toolgroup:nth-child(5),
    .native-word-html-toolgroup:nth-child(6) {
        width: auto;
        min-width: max-content;
        max-width: none;
    }
}
/* =========================================================
   Word to HTML - finaler Toolbar-Layout-Fix
   Ziel:
   - keine überlaufenden Icons in Nachbar-Kacheln
   - keine internen Zeilenumbrüche bei Icons
   - Toolbar scrollt horizontal, wenn der Platz nicht reicht
   ========================================================= */
.native-word-html-toolbar::-webkit-scrollbar {
    height: 8px;
}
.native-word-html-toolbar::-webkit-scrollbar-track {
    background: rgba(255, 255, 255, .05);
    border-radius: 999px;
}
.native-word-html-toolbar::-webkit-scrollbar-thumb {
    background: rgba(242, 166, 30, .42);
    border-radius: 999px;
}
.native-word-html-toolbar>.native-word-html-toolgroup,
.native-word-html-toolbar>.native-word-html-toolgroup-text,
.native-word-html-toolbar>.native-word-html-toolgroup-color,
.native-word-html-toolbar>.native-word-html-toolgroup:nth-child(3),
.native-word-html-toolbar>.native-word-html-toolgroup:nth-child(4),
.native-word-html-toolbar>.native-word-html-toolgroup:nth-child(5),
.native-word-html-toolbar>.native-word-html-toolgroup:nth-child(6) {
    width: max-content;
    min-width: max-content;
    max-width: none;
    box-sizing: border-box;
}
/* Die Kachel selbst berechnet ihre Breite anhand aller Icons/Dropdowns.
   Dadurch ragen Objekte/HTML/Listen nicht mehr in die nächste Kachel hinein. */
.native-word-html-toolgroup {
    grid-auto-flow: column;
    grid-auto-columns: max-content;
}
.native-word-html-toolgroup .native-word-icon-btn,
.native-word-html-toolgroup .native-word-html-file-label,
.native-word-html-toolgroup .native-word-html-size,
.native-word-html-toolgroup .native-word-html-font,
.native-word-html-toolgroup .native-word-html-color-only {
    position: relative;
}
/* Einheitliche Maße */
.native-word-icon-btn,
.native-word-html-file-label.native-word-icon-btn,
.native-word-html-color-only {
    padding: 0;
    line-height: 1;
}
.native-word-html-size {
    width: 78px !important;
    min-width: 78px !important;
    max-width: 78px !important;
    height: 38px !important;
    min-height: 38px !important;
    max-height: 38px;
}
.native-word-html-font {
    width: 200px !important;
    min-width: 200px !important;
    max-width: 200px !important;
    height: 38px !important;
    min-height: 38px !important;
    max-height: 38px;
}
/* Sicherheitsabstand zwischen Kacheln, falls Browser max-content bei Selects knapp berechnet */
.native-word-html-toolgroup-text {
    padding-right: 12px;
}
.native-word-html-toolgroup-color {
    padding-right: 12px;
}
.native-word-html-toolgroup:nth-child(3),
.native-word-html-toolgroup:nth-child(4),
.native-word-html-toolgroup:nth-child(5),
.native-word-html-toolgroup:nth-child(6) {
    padding-right: 12px;
}
/* =========================================================
   Word to HTML - Abstand in Toolbar + gleiche Editor-Höhe
   ========================================================= */

.native-word-html-toolbar {
    padding-bottom: 8px;
}
.native-word-html-toolgroup {
    flex: 0 0 auto;
    height: 96px;
    min-height: 96px;
    max-height: 96px;
    display: grid;
    grid-template-rows: 18px 40px;
    column-gap: 7px;
    row-gap: 6px;
    align-items: center;
    align-content: start;
    justify-items: start;
    justify-content: start;
    padding: 10px;
    overflow: hidden;
    box-sizing: border-box;
}
.native-word-html-toolgroup>span {
    grid-row: 1;
    grid-column: 1 / -1;
    width: 100%;
    min-width: 0;
    height: 18px;
    line-height: 18px;
    margin: 0;
    align-self: start;
    justify-self: stretch;
}
.native-word-html-toolgroup .native-word-icon-btn,
.native-word-html-toolgroup .native-word-html-file-label,
.native-word-html-toolgroup .native-word-html-size,
.native-word-html-toolgroup .native-word-html-font,
.native-word-html-toolgroup .native-word-html-color-only {
    grid-row: 2;
    align-self: center;
    justify-self: start;
    margin: 0;
    transform: none;
}
.native-word-html-toolgroup-color {
    grid-template-columns: 38px 38px;
    width: 103px;
    min-width: 103px;
    max-width: 103px;
}
.native-word-html-toolgroup:nth-child(3) {
    grid-template-columns: 38px 38px 38px 38px 38px;
    width: 238px;
    min-width: 238px;
    max-width: 238px;
}
.native-word-html-toolgroup:nth-child(4) {
    grid-template-columns: 38px 38px;
    width: 103px;
    min-width: 103px;
    max-width: 103px;
}
.native-word-html-toolgroup:nth-child(5) {
    grid-template-columns: 38px 38px 38px 38px;
    width: 193px;
    min-width: 193px;
    max-width: 193px;
}
.native-word-html-toolgroup:nth-child(6) {
    grid-template-columns: 38px 38px 38px 38px 38px 38px;
    width: 283px;
    min-width: 283px;
    max-width: 283px;
}
.native-word-icon-btn,
.native-word-html-file-label.native-word-icon-btn,
.native-word-html-color-only {
    width: 38px;
    min-width: 38px;
    max-width: 38px;
    height: 38px !important;
    min-height: 38px !important;
    max-height: 38px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    box-sizing: border-box;
}
.native-word-html-grid {
    align-items: stretch;
}
.native-word-html-grid>.native-tools-card {
    display: flex;
    flex-direction: column;
}
.native-word-html-editor,
.native-word-html-code-editor {
    flex: 1 1 auto;
    min-height: 540px;
    height: 540px;
    max-height: none;
}
.native-word-html-code,
.native-word-html-lines {
    min-height: 540px !important;
    height: 540px;
    max-height: none;
}
.native-word-html-code {
    overflow: auto;
}
.native-word-html-lines {
    overflow: hidden;
}
@media (max-width: 900px) {
.native-word-html-editor,
    .native-word-html-code-editor,
    .native-word-html-code,
    .native-word-html-lines {
        min-height: 420px !important;
        height: 420px;
    }
}
/* =========================================================
   Word to HTML - Light/Dark Controls + sauberer Toolbar-Rahmen
   ========================================================= */

/* Der äußere Rahmen um alle Format-Kacheln bekommt einen gleichmäßigen Innenabstand. */
.native-word-html-toolbar {
    border: 1px solid rgba(255, 255, 255, .11);
    border-radius: 16px;
    background: rgba(255, 255, 255, .035);
}
/* Einzelkacheln behalten sauberen Abstand innerhalb des äußeren Rahmens. */
.native-word-html-toolbar>.native-word-html-toolgroup {
    margin: 0;
}
/* Dark Mode: Buttons/Dropdowns schwarz, Icons/Text weiß. */
html:not(.light-mode) body:not(.light-mode) .native-word-html-toolbar .native-word-icon-btn,
html:not(.light-mode) body:not(.light-mode) .native-word-html-toolbar .native-word-html-file-label.native-word-icon-btn,
html:not(.light-mode) body:not(.light-mode) .native-word-html-toolbar .native-word-html-size,
html:not(.light-mode) body:not(.light-mode) .native-word-html-toolbar .native-word-html-font {
    border: 1px solid rgba(255, 255, 255, .18);
}
/* Light Mode: Buttons/Dropdowns weiß, Icons/Text schwarz. */
body.light-mode .native-word-html-toolbar {
    border-color: rgba(0, 0, 0, .12);
    background: rgba(255, 255, 255, .65);
}
body.light-mode .native-word-html-toolbar .native-word-html-toolgroup {
    background: rgba(255, 255, 255, .82);
    border-color: rgba(0, 0, 0, .14);
}
body.light-mode .native-word-html-toolbar .native-word-icon-btn,
body.light-mode .native-word-html-toolbar .native-word-html-file-label.native-word-icon-btn,
body.light-mode .native-word-html-toolbar .native-word-html-size,
body.light-mode .native-word-html-toolbar .native-word-html-font {
    border: 1px solid rgba(0, 0, 0, .18);
}
/* Dropdown-Options passend zum jeweiligen Theme. */
/* Colorpicker: kein zusätzlicher Rahmen/Schriftzug, aber sauber mit den Buttons ausgerichtet.
   Die Fläche bleibt absichtlich die gewählte Farbe. */
.native-word-html-toolbar .native-word-html-color-only {
    border: 1px solid rgba(242, 166, 30, .75);
}
body.light-mode .native-word-html-toolbar .native-word-html-color-only {
    border-color: rgba(0, 0, 0, .18);
}
html:not(.light-mode) body:not(.light-mode) .native-word-html-toolbar .native-word-html-color-only {
    border-color: rgba(255, 255, 255, .22);
}
/* Icon-Striche übernehmen sauber die aktuelle Button-Farbe. */
/* =========================================================
   Word to HTML - lokale Schriftarten kennzeichnen
   ========================================================= */

.native-word-html-font optgroup {
    font-family: Arial, Helvetica, sans-serif;
    font-weight: 950;
}
.native-word-html-font option {
    font-weight: 500;
}
html:not(.light-mode) body:not(.light-mode) .native-word-html-font option:disabled {
    color: #777777 !important;
    background: #111111 !important;
    font-style: italic;
}
body.light-mode .native-word-html-font option:disabled {
    color: #777777 !important;
    background: #eeeeee !important;
    font-style: italic;
}
/* =========================================================
   Word to HTML - Fontgruppen ohne Deaktivieren
   ========================================================= */

.native-word-html-font optgroup[label="Installiert"],
.native-word-html-font optgroup[label="Nicht installiert"] {
    font-family: Arial, Helvetica, sans-serif;
    font-weight: 950;
}
.native-word-html-font optgroup[label="Nicht installiert"] option {
    font-family: Arial, Helvetica, sans-serif;
    font-style: normal;
    opacity: .82;
}
html:not(.light-mode) body:not(.light-mode) .native-word-html-font option:disabled,
body.light-mode .native-word-html-font option:disabled {
    color: inherit !important;
    background: inherit !important;
    font-style: normal !important;
}
/* =========================================================
   Word to HTML - Theme Buttons + Toolbar ohne horizontalen Scroll
   ========================================================= */

/* Die Format-Kacheln umbrechen wieder in neue Zeilen.
   Dadurch gibt es im Word-to-HTML-Tool keinen horizontalen Toolbar-Scroll mehr. */
.native-word-html-toolbar {
    display: flex;
    flex-wrap: wrap;
    align-items: stretch;
    justify-content: flex-start;
    gap: 10px;
    width: 100%;
    max-width: 100%;
    overflow-x: hidden;
    overflow-y: visible;
    padding: 12px;
    box-sizing: border-box;
}
.native-word-html-toolbar::-webkit-scrollbar {
    display: none !important;
}
/* Die einzelnen Format-Kacheln dürfen als komplette Kachel umbrechen,
   intern bleiben die Icons aber sauber in einer Reihe. */
.native-word-html-toolbar>.native-word-html-toolgroup,
.native-word-html-toolbar>.native-word-html-toolgroup-text,
.native-word-html-toolbar>.native-word-html-toolgroup-color,
.native-word-html-toolbar>.native-word-html-toolgroup:nth-child(3),
.native-word-html-toolbar>.native-word-html-toolgroup:nth-child(4),
.native-word-html-toolbar>.native-word-html-toolgroup:nth-child(5),
.native-word-html-toolbar>.native-word-html-toolgroup:nth-child(6) {
    flex: 0 0 auto;
    height: 96px;
    min-height: 96px;
    max-height: 96px;
    overflow: hidden;
}
/* Dark Mode: Button-/Dropdown-Hintergrund schwarz, Icons/Text weiß. */
html:not(.light-mode) body:not(.light-mode) .native-word-html-toolbar .native-word-icon-btn,
html:not(.light-mode) body:not(.light-mode) .native-word-html-toolbar .native-word-html-file-label.native-word-icon-btn,
html:not(.light-mode) body:not(.light-mode) .native-word-html-toolbar .native-word-html-size,
html:not(.light-mode) body:not(.light-mode) .native-word-html-toolbar .native-word-html-font {
    background: #000000;
    background-color: #000000;
    color: #ffffff;
    border-color: rgba(255, 255, 255, .18);
    box-shadow: none;
}
/* Light Mode: Button-/Dropdown-Hintergrund weiß, Icons/Text schwarz. */
body.light-mode .native-word-html-toolbar .native-word-icon-btn,
body.light-mode .native-word-html-toolbar .native-word-html-file-label.native-word-icon-btn,
body.light-mode .native-word-html-toolbar .native-word-html-size,
body.light-mode .native-word-html-toolbar .native-word-html-font {
    background: #ffffff;
    background-color: #ffffff;
    color: #000000;
    border-color: rgba(0, 0, 0, .18);
    box-shadow: none;
}
/* Hover/Focus bleibt dezent, aber ohne gelben Flächen-Hintergrund. */
html:not(.light-mode) body:not(.light-mode) .native-word-html-toolbar .native-word-icon-btn:hover,
html:not(.light-mode) body:not(.light-mode) .native-word-html-toolbar .native-word-html-file-label.native-word-icon-btn:hover,
html:not(.light-mode) body:not(.light-mode) .native-word-html-toolbar .native-word-html-size:hover,
html:not(.light-mode) body:not(.light-mode) .native-word-html-toolbar .native-word-html-font:hover,
html:not(.light-mode) body:not(.light-mode) .native-word-html-toolbar .native-word-icon-btn:focus-visible,
html:not(.light-mode) body:not(.light-mode) .native-word-html-toolbar .native-word-html-size:focus,
html:not(.light-mode) body:not(.light-mode) .native-word-html-toolbar .native-word-html-font:focus {
    background: #070707 !important;
    background-color: #070707 !important;
    color: #ffffff !important;
    border-color: rgba(242, 166, 30, .75) !important;
    box-shadow: 0 0 0 3px rgba(242, 166, 30, .14) !important;
}
body.light-mode .native-word-html-toolbar .native-word-icon-btn:hover,
body.light-mode .native-word-html-toolbar .native-word-html-file-label.native-word-icon-btn:hover,
body.light-mode .native-word-html-toolbar .native-word-html-size:hover,
body.light-mode .native-word-html-toolbar .native-word-html-font:hover,
body.light-mode .native-word-html-toolbar .native-word-icon-btn:focus-visible,
body.light-mode .native-word-html-toolbar .native-word-html-size:focus,
body.light-mode .native-word-html-toolbar .native-word-html-font:focus {
    background: #f8fafc !important;
    background-color: #f8fafc !important;
    color: #000000 !important;
    border-color: rgba(242, 166, 30, .75) !important;
    box-shadow: 0 0 0 3px rgba(242, 166, 30, .18) !important;
}
/* Dropdown-Options passend zum Theme. */
html:not(.light-mode) body:not(.light-mode) .native-word-html-toolbar .native-word-html-size option,
html:not(.light-mode) body:not(.light-mode) .native-word-html-toolbar .native-word-html-font option {
    background: #000000;
    color: #ffffff;
}
body.light-mode .native-word-html-toolbar .native-word-html-size option,
body.light-mode .native-word-html-toolbar .native-word-html-font option {
    background: #ffffff;
    color: #000000;
}
/* Ausrichtungs-Icons übernehmen garantiert die aktuelle Buttonfarbe. */
.word-align-icon i {
    background: currentColor;
}
/* Colorpicker bleibt farbig, aber ohne gelbe Button-Fläche. */
.native-word-html-toolbar .native-word-html-color-only {
    background: transparent;
    background-color: transparent;
    box-shadow: none;
}
/* Word-to-HTML Format-Buttons / Clickboxen:
   saubere Zentrierung, keine leicht verschobenen Icons. */
.native-word-html-toolbar .native-word-icon-btn,
.native-word-html-toolbar .native-word-html-file-label.native-word-icon-btn,
.native-word-html-toolbar .native-word-html-size,
.native-word-html-toolbar .native-word-html-font {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    text-align: center;
    line-height: 1;
    box-sizing: border-box;
}
.native-word-html-toolbar .native-word-icon-btn,
.native-word-html-toolbar .native-word-html-file-label.native-word-icon-btn {
    padding: 0;
}
.native-word-html-toolbar .native-word-icon-btn>*,
.native-word-html-toolbar .native-word-html-file-label.native-word-icon-btn>* {
    margin: 0;
    transform: none;
}
.native-word-html-toolbar .word-align-icon {
    margin: 0 auto;
}
/* Dropdowns bleiben Buttons, aber Text ist sauber vertikal zentriert. */
.native-word-html-toolbar .native-word-html-size,
.native-word-html-toolbar .native-word-html-font {
    justify-content: flex-start;
    text-align: left;
    line-height: normal;
}
/* Falls native Icons per Emoji minimal springen, gleiche Font-Rendering-Basis erzwingen. */
.native-word-html-toolbar .native-word-icon-btn {
    font-family: Arial, Helvetica, sans-serif !important;
    font-weight: 950;
}
.native-word-html-toolbar .native-word-icon-btn[title*="Bild"],
.native-word-html-toolbar .native-word-icon-btn[title*="HTML"],
.native-word-html-toolbar .native-word-icon-btn[title*="Herunterladen"],
.native-word-html-toolbar .native-word-icon-btn[title*="öffnen"],
.native-word-html-toolbar .native-word-icon-btn[title*="Öffnen"] {
    font-family: "Segoe UI Emoji", "Apple Color Emoji", "Noto Color Emoji", Arial, sans-serif;
}
/* =========================================================
   Tools Color Picker - Darkmode für Browser-Control
   ========================================================= */

/*
   Wichtig:
   Der große Farbverlauf im Screenshot ist der native Browser-/OS-Farbwähler
   von input[type="color"]. Dieser Popup selbst ist nur begrenzt per CSS steuerbar.
   color-scheme gibt dem Browser aber sauber vor, dass das Control im Darkmode
   dunkle Systemfarben verwenden soll.
*/

html:not(.light-mode) .native-tools-page,
body:not(.light-mode) .native-tools-page,
body:not(.light-mode) .native-color-picker-tool,
body:not(.light-mode) .native-color-picker-tool *,
html:not(.light-mode) body:not(.light-mode) .native-word-html-color-label,
html:not(.light-mode) body:not(.light-mode) .native-word-html-color-label * {
    color-scheme: dark;
}
body.light-mode .native-tools-page,
body.light-mode .native-color-picker-tool,
body.light-mode .native-color-picker-tool *,
body.light-mode .native-word-html-color-label,
body.light-mode .native-word-html-color-label * {
    color-scheme: light;
}
.native-tools-page input[type="color"],
.native-color-picker-tool input[type="color"],
.native-word-html-color-label input[type="color"] {
    appearance: auto;
    -webkit-appearance: auto;
    border: 1px solid var(--tools-border);
    background: var(--tools-input-bg, var(--tools-card));
    color: var(--tools-text);
}
body:not(.light-mode) .native-tools-page input[type="color"],
body:not(.light-mode) .native-color-picker-tool input[type="color"],
html:not(.light-mode) body:not(.light-mode) .native-word-html-color-label input[type="color"] {
    background-color: #111827;
    border-color: rgba(255, 255, 255, .22);
    color: #f3f4f6;
    color-scheme: dark;
}
body.light-mode .native-tools-page input[type="color"],
body.light-mode .native-color-picker-tool input[type="color"],
body.light-mode .native-word-html-color-label input[type="color"] {
    background-color: #ffffff;
    border-color: rgba(0, 0, 0, .2);
    color: #111827;
    color-scheme: light;
}
/* =========================================================
   Word to HTML - Code-Markierung neutral + Toolbar-Abstände
   ========================================================= */

/* Inline-Code im Rich-Text-Editor/Export: kein Gelb, sondern schwarz/weiß. */
/* Code-Toolbar-Icon soll nicht wie Syntax-Highlighting aussehen. */
.native-word-html-toolbar .native-word-code-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    height: 100%;
    margin: 0;
    padding: 0;
    color: currentColor;
    background: transparent;
    border: 0;
    font-family: Consolas, Monaco, 'Courier New', monospace;
    font-size: 13px;
    font-weight: 950;
    line-height: 1;
}
/* Falls noch eine alte Browsercache-Version mit <code> im Button aktiv ist. */
.native-word-html-toolbar .native-word-icon-btn code {
    color: currentColor;
    background: transparent;
    border: 0;
    padding: 0;
    margin: 0;
    font-family: Consolas, Monaco, 'Courier New', monospace;
    font-size: 13px;
    line-height: 1;
}
/*
   Text-Kachel hat jetzt 5 Icon-Buttons + Schriftgröße + Schriftart.
   Vorher waren nur 4 Icon-Spalten definiert; dadurch entstand der sichtbare
   Sonderabstand vor den Dropdowns.
*/
.native-word-html-toolgroup-text {
    grid-template-columns: 38px 38px 38px 38px 38px 78px 200px;
    width: 558px;
    min-width: 558px;
    max-width: 558px;
    column-gap: 7px;
}
.native-word-html-toolgroup-text .native-word-icon-btn,
.native-word-html-toolgroup-text .native-word-html-size,
.native-word-html-toolgroup-text .native-word-html-font {
    grid-row: 2;
    align-self: center;
    justify-self: start;
    margin: 0;
    transform: none;
}
/* =========================================================
   Word to HTML - erweitertes HTML Syntax Highlighting
   ========================================================= */

.native-word-html-code .html-bracket {
    color: #8b949e;
    font-weight: 900;
}
.native-word-html-code .html-tag {
    color: #7ee787;
    font-weight: 950;
}
.native-word-html-code .html-attr {
    color: #d2a8ff;
    font-weight: 900;
}
.native-word-html-code .html-equals {
    color: #ff7b72;
    font-weight: 900;
}
.native-word-html-code .html-string {
    color: #ffa657;
    font-weight: 850;
}
.native-word-html-code .html-entity {
    color: #79c0ff;
    font-weight: 850;
}
.native-word-html-code .html-comment {
    color: #8b949e;
    font-style: italic;
    font-weight: 600;
}
.native-word-html-code .html-doctype {
    color: #ff7b72;
    font-weight: 900;
}
body.light-mode .native-word-html-code .html-bracket {
    color: #57606a;
}
body.light-mode .native-word-html-code .html-tag {
    color: #116329;
}
body.light-mode .native-word-html-code .html-attr {
    color: #8250df;
}
body.light-mode .native-word-html-code .html-equals {
    color: #cf222e;
}
body.light-mode .native-word-html-code .html-string {
    color: #953800;
}
body.light-mode .native-word-html-code .html-entity {
    color: #0550ae;
}
body.light-mode .native-word-html-code .html-comment {
    color: #6e7781;
}
body.light-mode .native-word-html-code .html-doctype {
    color: #cf222e;
}
/* =========================================================
   Word to HTML - CSS in style="" Syntax Highlighting
   ========================================================= */

.native-word-html-code .html-quote {
    color: #ffa657;
    font-weight: 850;
}
.native-word-html-code .html-style-property {
    color: #ffdf5d;
    font-weight: 950;
}
.native-word-html-code .html-style-colon,
.native-word-html-code .html-style-semicolon {
    color: #ff7b72;
    font-weight: 900;
}
.native-word-html-code .html-style-value {
    color: #f0f6fc;
    font-weight: 800;
}
.native-word-html-code .html-style-color {
    color: #79c0ff;
    font-weight: 950;
}
.native-word-html-code .html-style-number {
    color: #a5d6ff;
    font-weight: 950;
}
.native-word-html-code .html-style-function {
    color: #d2a8ff;
    font-weight: 950;
}
.native-word-html-code .html-style-keyword {
    color: #ffa657;
    font-weight: 900;
}
body.light-mode .native-word-html-code .html-quote {
    color: #953800;
}
body.light-mode .native-word-html-code .html-style-property {
    color: #7d4e00;
}
body.light-mode .native-word-html-code .html-style-colon,
body.light-mode .native-word-html-code .html-style-semicolon {
    color: #cf222e;
}
body.light-mode .native-word-html-code .html-style-value {
    color: #24292f;
}
body.light-mode .native-word-html-code .html-style-color {
    color: #0550ae;
}
body.light-mode .native-word-html-code .html-style-number {
    color: #0a3069;
}
body.light-mode .native-word-html-code .html-style-function {
    color: #8250df;
}
body.light-mode .native-word-html-code .html-style-keyword {
    color: #953800;
}
/* =========================================================
   Word to HTML - Code-Markierung skaliert mit Schriftgröße
   ========================================================= */

/*
   Die Inline-Code-Markierung darf nicht an festen px-Werten hängen.
   em skaliert mit der aktuellen Schriftgröße, dadurch bleibt der Rahmen bei
   kleinen und großen Texten optisch passend.
*/
/*
   Falls alte HTML-Fragmente noch feste px-Werte inline enthalten:
   Im Editor gewinnt dieser Override, im exportierten HTML wird der Style über
   getWordHtmlInlineCodeStyle() ohnehin neu mit em-Werten geschrieben.
*/
.native-word-html-editor code[data-star="code"][style],
.native-word-html-editor code[data-word-html-code="inline"][style] {
    border-width: 0.08em;
    border-radius: 0.22em;
    padding: 0.04em 0.28em;
}
/* =========================================================
   Word to HTML - Code-Markierung Fontsize-Fix
   ========================================================= */

/*
   <code> wird von Browsern gerne mit eigener Standardschriftgröße gerendert.
   Deshalb wird font-size auf inherit gesetzt, solange keine explizite Größe
   auf dem Code-Element liegt. Rahmen/Padding nutzen em und skalieren mit.
*/
.native-word-html-editor code[data-star="code"],
.native-word-html-editor code[data-word-html-code="inline"],
.native-word-html-preview code[data-star="code"],
.native-word-html-preview code[data-word-html-code="inline"] {
    font-family: Consolas, Monaco, 'Courier New', monospace;
    background: #000000;
    color: #ffffff;
    border: 0.08em solid #ffffff;
    border-radius: 0.22em;
    padding: 0.04em 0.28em;
    line-height: 1.15;
    box-decoration-break: clone;
    -webkit-box-decoration-break: clone;
}
/*
   Kein !important bei font-size:
   Wenn JS beim Ändern der Schriftgröße eine explizite Größe auf <code> setzt,
   muss diese gewinnen.
*/
.native-word-html-editor code[data-star="code"]:not([style*="font-size"]),
.native-word-html-editor code[data-word-html-code="inline"]:not([style*="font-size"]) {
    font-size: inherit;
}
/* Fokus bleibt erkennbar, aber ohne graue Füllung. */
body.tools-page .native-word-html-editor.is-dragover {
    background-image: none !important;
}
/* =========================================================
   Native Tools - WordHTML Darkmode Only Background Black
   ========================================================= */

/*
   Finaler Neuversuch:
   - KEINE Lightmode-Regel für Word/HTML.
   - Nur Darkmode wird angepasst.
   - Darkmode greift nur, wenn weder html noch body .light-mode haben.
   - Syntax-Highlighting bleibt unverändert, weil im Codebereich nur
     background/border gesetzt wird, nicht color oder -webkit-text-fill-color.
*/

/* Darkmode: Rich-Text Editor schwarz */
html:not(.light-mode) body:not(.light-mode).tools-page .native-tools-page .native-word-html-editor,
html:not(.light-mode) body:not(.light-mode).tools-page .native-tools-page .native-word-html-editor:focus,
html:not(.light-mode) body:not(.light-mode).tools-page .native-tools-page .native-word-html-editor.is-dragover {
    background: #000000 !important;
    background-color: #000000 !important;
    background-image: none !important;
    color: #ffffff !important;
    caret-color: #ffffff !important;
    border-color: rgba(255, 255, 255, 0.34) !important;
}
/* Darkmode: HTML-Code-Flächen schwarz, Syntaxfarben NICHT anfassen */
html:not(.light-mode) body:not(.light-mode).tools-page .native-tools-page .native-word-html-code-editor,
html:not(.light-mode) body:not(.light-mode).tools-page .native-tools-page .native-word-html-code-editor:focus-within,
html:not(.light-mode) body:not(.light-mode).tools-page .native-tools-page .native-word-html-code,
html:not(.light-mode) body:not(.light-mode).tools-page .native-tools-page .native-word-html-lines,
html:not(.light-mode) body:not(.light-mode).tools-page .native-tools-page #tool-wordhtml-output,
html:not(.light-mode) body:not(.light-mode).tools-page .native-tools-page .native-word-html-output {
    background: #000000 !important;
    background-color: #000000 !important;
    background-image: none !important;
    border-color: rgba(255, 255, 255, 0.34) !important;
}
/* Darkmode: Line numbers lesbar */
/* Darkmode: Preview optional schwarz, ohne Code-Highlighting anzufassen */
html:not(.light-mode) body:not(.light-mode).tools-page .native-tools-page .native-word-html-preview {
    background: #000000;
    background-color: #000000;
    background-image: none;
    border-color: rgba(255, 255, 255, 0.34);
}
/* =========================================================
   Native Tools - WordHTML Lightmode Syntax Highlighting Clean
   ========================================================= */

/*
   Nur Lightmode:
   - Syntax-Highlighting im HTML-Code-Editor entschärfen.
   - Keine fetten Highlight-Spans mehr.
   - Keine grellen/komischen Farben.
   - Darkmode wird NICHT angefasst.
*/

html.light-mode body.tools-page .native-tools-page .native-word-html-code,
body.light-mode.tools-page .native-tools-page .native-word-html-code,
body.light-mode .native-tools-page .native-word-html-code {
    font-weight: 400;
    color: #111111;
    -webkit-text-fill-color: currentColor;
}
/* Alle Syntax-Spans im Lightmode grundsätzlich normalgewichtig */
html.light-mode body.tools-page .native-tools-page .native-word-html-code span,
body.light-mode.tools-page .native-tools-page .native-word-html-code span,
body.light-mode .native-tools-page .native-word-html-code span,
html.light-mode body.tools-page .native-tools-page .native-word-html-code .html-bracket,
html.light-mode body.tools-page .native-tools-page .native-word-html-code .html-tag,
html.light-mode body.tools-page .native-tools-page .native-word-html-code .html-attr,
html.light-mode body.tools-page .native-tools-page .native-word-html-code .html-equals,
html.light-mode body.tools-page .native-tools-page .native-word-html-code .html-string,
html.light-mode body.tools-page .native-tools-page .native-word-html-code .html-entity,
html.light-mode body.tools-page .native-tools-page .native-word-html-code .html-comment,
html.light-mode body.tools-page .native-tools-page .native-word-html-code .html-doctype,
html.light-mode body.tools-page .native-tools-page .native-word-html-code .html-quote,
html.light-mode body.tools-page .native-tools-page .native-word-html-code .html-style-property,
html.light-mode body.tools-page .native-tools-page .native-word-html-code .html-style-colon,
html.light-mode body.tools-page .native-tools-page .native-word-html-code .html-style-semicolon,
html.light-mode body.tools-page .native-tools-page .native-word-html-code .html-style-value,
html.light-mode body.tools-page .native-tools-page .native-word-html-code .html-style-color,
html.light-mode body.tools-page .native-tools-page .native-word-html-code .html-style-number,
html.light-mode body.tools-page .native-tools-page .native-word-html-code .html-style-function,
html.light-mode body.tools-page .native-tools-page .native-word-html-code .html-style-keyword {
    font-weight: 400;
    font-style: normal;
    text-shadow: none;
    -webkit-text-fill-color: currentColor;
}
/* Dezente Lightmode-Farben */
html.light-mode body.tools-page .native-tools-page .native-word-html-code .html-bracket,
body.light-mode.tools-page .native-tools-page .native-word-html-code .html-bracket,
body.light-mode .native-tools-page .native-word-html-code .html-bracket {
    color: #555555;
}
html.light-mode body.tools-page .native-tools-page .native-word-html-code .html-tag,
html.light-mode body.tools-page .native-tools-page .native-word-html-code .html-doctype,
body.light-mode.tools-page .native-tools-page .native-word-html-code .html-tag,
body.light-mode.tools-page .native-tools-page .native-word-html-code .html-doctype,
body.light-mode .native-tools-page .native-word-html-code .html-tag,
body.light-mode .native-tools-page .native-word-html-code .html-doctype {
    color: #064f8c;
}
html.light-mode body.tools-page .native-tools-page .native-word-html-code .html-attr,
html.light-mode body.tools-page .native-tools-page .native-word-html-code .html-style-property,
body.light-mode.tools-page .native-tools-page .native-word-html-code .html-attr,
body.light-mode.tools-page .native-tools-page .native-word-html-code .html-style-property,
body.light-mode .native-tools-page .native-word-html-code .html-attr,
body.light-mode .native-tools-page .native-word-html-code .html-style-property {
    color: #7a4a00;
}
html.light-mode body.tools-page .native-tools-page .native-word-html-code .html-equals,
html.light-mode body.tools-page .native-tools-page .native-word-html-code .html-style-colon,
html.light-mode body.tools-page .native-tools-page .native-word-html-code .html-style-semicolon,
body.light-mode.tools-page .native-tools-page .native-word-html-code .html-equals,
body.light-mode.tools-page .native-tools-page .native-word-html-code .html-style-colon,
body.light-mode.tools-page .native-tools-page .native-word-html-code .html-style-semicolon,
body.light-mode .native-tools-page .native-word-html-code .html-equals,
body.light-mode .native-tools-page .native-word-html-code .html-style-colon,
body.light-mode .native-tools-page .native-word-html-code .html-style-semicolon {
    color: #555555;
}
html.light-mode body.tools-page .native-tools-page .native-word-html-code .html-string,
html.light-mode body.tools-page .native-tools-page .native-word-html-code .html-quote,
html.light-mode body.tools-page .native-tools-page .native-word-html-code .html-style-value,
body.light-mode.tools-page .native-tools-page .native-word-html-code .html-string,
body.light-mode.tools-page .native-tools-page .native-word-html-code .html-quote,
body.light-mode.tools-page .native-tools-page .native-word-html-code .html-style-value,
body.light-mode .native-tools-page .native-word-html-code .html-string,
body.light-mode .native-tools-page .native-word-html-code .html-quote,
body.light-mode .native-tools-page .native-word-html-code .html-style-value {
    color: #116329;
}
html.light-mode body.tools-page .native-tools-page .native-word-html-code .html-entity,
html.light-mode body.tools-page .native-tools-page .native-word-html-code .html-style-color,
html.light-mode body.tools-page .native-tools-page .native-word-html-code .html-style-number,
body.light-mode.tools-page .native-tools-page .native-word-html-code .html-entity,
body.light-mode.tools-page .native-tools-page .native-word-html-code .html-style-color,
body.light-mode.tools-page .native-tools-page .native-word-html-code .html-style-number,
body.light-mode .native-tools-page .native-word-html-code .html-entity,
body.light-mode .native-tools-page .native-word-html-code .html-style-color,
body.light-mode .native-tools-page .native-word-html-code .html-style-number {
    color: #0550ae;
}
html.light-mode body.tools-page .native-tools-page .native-word-html-code .html-style-function,
html.light-mode body.tools-page .native-tools-page .native-word-html-code .html-style-keyword,
body.light-mode.tools-page .native-tools-page .native-word-html-code .html-style-function,
body.light-mode.tools-page .native-tools-page .native-word-html-code .html-style-keyword,
body.light-mode .native-tools-page .native-word-html-code .html-style-function,
body.light-mode .native-tools-page .native-word-html-code .html-style-keyword {
    color: #8250df;
}
html.light-mode body.tools-page .native-tools-page .native-word-html-code .html-comment,
body.light-mode.tools-page .native-tools-page .native-word-html-code .html-comment,
body.light-mode .native-tools-page .native-word-html-code .html-comment {
    color: #6e7781;
    font-style: normal;
}
/* =========================================================
   Native Tools - WordHTML Darkgrey Focus + Calm Dark Syntax STRICT
   ========================================================= */

/*
   Korrektur:
   Word/HTML-Nachbesserung ebenfalls NUR im echten Darkmode.
   Greift nicht, sobald html.light-mode ODER body.light-mode aktiv ist.
*/

/* Word/Rich-Text Editor links: auch bei Fokus dunkelgrau halten - NUR Darkmode */
html:not(.light-mode) body:not(.light-mode).tools-page .native-tools-page .native-word-html-editor,
html:not(.light-mode) body:not(.light-mode).tools-page .native-tools-page .native-word-html-editor:focus,
html:not(.light-mode) body:not(.light-mode).tools-page .native-tools-page .native-word-html-editor:focus-visible,
html:not(.light-mode) body:not(.light-mode).tools-page .native-tools-page .native-word-html-editor:active,
html:not(.light-mode) body:not(.light-mode).tools-page .native-tools-page .native-word-html-editor.is-dragover {
    background: #1f1f1f !important;
    background-color: #1f1f1f !important;
    background-image: none !important;
    color: #ffffff !important;
    caret-color: #ffffff !important;
    border-color: rgba(255, 255, 255, 0.28) !important;
}
/* Fokusrahmen sichtbar lassen - NUR Darkmode */
html:not(.light-mode) body:not(.light-mode).tools-page .native-tools-page .native-word-html-editor:focus,
html:not(.light-mode) body:not(.light-mode).tools-page .native-tools-page .native-word-html-editor:focus-visible {
    box-shadow: 0 0 0 3px rgba(233, 166, 36, 0.16) !important;
}
/* Child-Elemente im Rich-Text Editor hell lesbar - NUR Darkmode */
html:not(.light-mode) body:not(.light-mode).tools-page .native-tools-page .native-word-html-editor p,
html:not(.light-mode) body:not(.light-mode).tools-page .native-tools-page .native-word-html-editor div,
html:not(.light-mode) body:not(.light-mode).tools-page .native-tools-page .native-word-html-editor li,
html:not(.light-mode) body:not(.light-mode).tools-page .native-tools-page .native-word-html-editor td,
html:not(.light-mode) body:not(.light-mode).tools-page .native-tools-page .native-word-html-editor th,
html:not(.light-mode) body:not(.light-mode).tools-page .native-tools-page .native-word-html-editor h1,
html:not(.light-mode) body:not(.light-mode).tools-page .native-tools-page .native-word-html-editor h2,
html:not(.light-mode) body:not(.light-mode).tools-page .native-tools-page .native-word-html-editor h3,
html:not(.light-mode) body:not(.light-mode).tools-page .native-tools-page .native-word-html-editor h4,
html:not(.light-mode) body:not(.light-mode).tools-page .native-tools-page .native-word-html-editor h5,
html:not(.light-mode) body:not(.light-mode).tools-page .native-tools-page .native-word-html-editor h6 {
    color: #ffffff;
}
/* HTML-Code Editor: dunkelgraue Fläche - NUR Darkmode */
html:not(.light-mode) body:not(.light-mode).tools-page .native-tools-page .native-word-html-code-editor,
html:not(.light-mode) body:not(.light-mode).tools-page .native-tools-page .native-word-html-code,
html:not(.light-mode) body:not(.light-mode).tools-page .native-tools-page .native-word-html-lines,
html:not(.light-mode) body:not(.light-mode).tools-page .native-tools-page #tool-wordhtml-output,
html:not(.light-mode) body:not(.light-mode).tools-page .native-tools-page .native-word-html-output,
html:not(.light-mode) body:not(.light-mode).tools-page .native-tools-page .native-word-html-preview {
    background: #1f1f1f !important;
    background-color: #1f1f1f !important;
    background-image: none;
    border-color: rgba(255, 255, 255, 0.28) !important;
}
/* Darkmode Syntax-Highlighting beruhigen - NUR Darkmode */
html:not(.light-mode) body:not(.light-mode).tools-page .native-tools-page .native-word-html-code {
    color: #d6d6d6;
    font-weight: 400;
    -webkit-text-fill-color: currentColor;
}
html:not(.light-mode) body:not(.light-mode).tools-page .native-tools-page .native-word-html-code span {
    font-weight: 400;
    font-style: normal;
    text-shadow: none;
    -webkit-text-fill-color: currentColor;
}
html:not(.light-mode) body:not(.light-mode).tools-page .native-tools-page .native-word-html-code .html-bracket {
    color: #9ca3af;
}
html:not(.light-mode) body:not(.light-mode).tools-page .native-tools-page .native-word-html-code .html-tag,
html:not(.light-mode) body:not(.light-mode).tools-page .native-tools-page .native-word-html-code .html-doctype {
    color: #8dbf9b;
}
html:not(.light-mode) body:not(.light-mode).tools-page .native-tools-page .native-word-html-code .html-attr,
html:not(.light-mode) body:not(.light-mode).tools-page .native-tools-page .native-word-html-code .html-style-property {
    color: #c2a66a;
}
html:not(.light-mode) body:not(.light-mode).tools-page .native-tools-page .native-word-html-code .html-equals,
html:not(.light-mode) body:not(.light-mode).tools-page .native-tools-page .native-word-html-code .html-style-colon,
html:not(.light-mode) body:not(.light-mode).tools-page .native-tools-page .native-word-html-code .html-style-semicolon {
    color: #a0a0a0;
}
html:not(.light-mode) body:not(.light-mode).tools-page .native-tools-page .native-word-html-code .html-string,
html:not(.light-mode) body:not(.light-mode).tools-page .native-tools-page .native-word-html-code .html-quote,
html:not(.light-mode) body:not(.light-mode).tools-page .native-tools-page .native-word-html-code .html-style-value {
    color: #d0b98f;
}
html:not(.light-mode) body:not(.light-mode).tools-page .native-tools-page .native-word-html-code .html-entity,
html:not(.light-mode) body:not(.light-mode).tools-page .native-tools-page .native-word-html-code .html-style-color,
html:not(.light-mode) body:not(.light-mode).tools-page .native-tools-page .native-word-html-code .html-style-number {
    color: #8fb3d9;
}
html:not(.light-mode) body:not(.light-mode).tools-page .native-tools-page .native-word-html-code .html-style-function,
html:not(.light-mode) body:not(.light-mode).tools-page .native-tools-page .native-word-html-code .html-style-keyword {
    color: #b7a6d9;
}
html:not(.light-mode) body:not(.light-mode).tools-page .native-tools-page .native-word-html-code .html-comment {
    color: #7d8791;
    font-style: normal;
}
html:not(.light-mode) body:not(.light-mode).tools-page .native-tools-page .native-word-html-lines {
    color: rgba(255, 255, 255, 0.46);
}
/* =========================================================
   Native Tools - WordHTML Active Button Yellow Frame Manual Color
   ========================================================= */

/*
   Word/HTML:
   Aktive Text-Formatbuttons werden genauso hervorgehoben wie Hover/Focus:
   gelber Rahmen + dezenter gelber Shadow, keine gelbe Fläche.
*/

.native-word-html-toolgroup-text .native-word-icon-btn.is-active,
.native-word-html-toolgroup-text .native-word-icon-btn.active,
.native-word-html-toolgroup-text .native-word-icon-btn[aria-pressed="true"] {
    border-color: rgba(242, 166, 30, .85) !important;
    box-shadow: 0 0 0 3px rgba(242, 166, 30, .18) !important;
}
/* Darkmode: aktiver Button bleibt dunkel/schwarz, nur Rahmen/Shadow wird gelb */
html:not(.light-mode) body:not(.light-mode) .native-word-html-toolgroup-text .native-word-icon-btn.is-active,
html:not(.light-mode) body:not(.light-mode) .native-word-html-toolgroup-text .native-word-icon-btn.active,
html:not(.light-mode) body:not(.light-mode) .native-word-html-toolgroup-text .native-word-icon-btn[aria-pressed="true"] {
    background: #070707 !important;
    background-color: #070707 !important;
    color: #ffffff !important;
    border-color: rgba(242, 166, 30, .85) !important;
    box-shadow: 0 0 0 3px rgba(242, 166, 30, .18) !important;
}
/* Lightmode: aktiver Button bleibt hell/weiß, nur Rahmen/Shadow wird gelb */
body.light-mode .native-word-html-toolgroup-text .native-word-icon-btn.is-active,
body.light-mode .native-word-html-toolgroup-text .native-word-icon-btn.active,
body.light-mode .native-word-html-toolgroup-text .native-word-icon-btn[aria-pressed="true"],
html.light-mode body .native-word-html-toolgroup-text .native-word-icon-btn.is-active,
html.light-mode body .native-word-html-toolgroup-text .native-word-icon-btn.active,
html.light-mode body .native-word-html-toolgroup-text .native-word-icon-btn[aria-pressed="true"] {
    background: #f8fafc !important;
    background-color: #f8fafc !important;
    color: #000000 !important;
    border-color: rgba(242, 166, 30, .85) !important;
    box-shadow: 0 0 0 3px rgba(242, 166, 30, .18) !important;
}
/* =========================================================
   Native Tools - WordHTML Custom Modal
   ========================================================= */

.native-word-html-modal-backdrop {
    position: fixed;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 24px;
    background: rgba(0, 0, 0, .55);
    opacity: 0;
    pointer-events: none;
    transition: opacity .16s ease;
}
.native-word-html-modal-backdrop.is-open {
    opacity: 1;
    pointer-events: auto;
}
.native-word-html-modal {
    width: min(520px, 100%);
}
.native-word-html-modal-card {
    position: relative;
    border-radius: 20px;
    padding: 22px;
    border: 1px solid rgba(255, 255, 255, .16);
    background: #1f1f1f;
    color: #ffffff;
    box-shadow: 0 24px 80px rgba(0, 0, 0, .42);
}
.native-word-html-modal-card h3 {
    margin: 0 42px 8px 0;
    font-size: 22px;
    line-height: 1.2;
    color: var(--tools-accent, #e9a624);
}
.native-word-html-modal-card p {
    margin: 0 0 16px 0;
    color: rgba(255, 255, 255, .74);
    font-weight: 700;
}
.native-word-html-modal-close {
    position: absolute;
    top: 14px;
    right: 14px;
    width: 34px;
    height: 34px;
    border-radius: 10px;
    border: 1px solid rgba(255, 255, 255, .18);
    background: #000000;
    color: #ffffff;
    font-size: 22px;
    font-weight: 900;
    line-height: 1;
    cursor: pointer;
}
.native-word-html-modal-fields {
    display: grid;
    gap: 14px;
}
.native-word-html-modal-field {
    display: grid;
    gap: 7px;
    color: inherit;
    font-weight: 900;
}
.native-word-html-modal-field span {
    font-size: 13px;
    text-transform: uppercase;
    letter-spacing: .06em;
    color: rgba(255, 255, 255, .72);
}
.native-word-html-modal-actions {
    display: flex;
    justify-content: flex-end;
    gap: 10px;
    margin-top: 18px;
}
/* Lightmode */
html.light-mode .native-word-html-modal-backdrop,
body.light-mode .native-word-html-modal-backdrop {
    background: rgba(0, 0, 0, .32);
}
html.light-mode .native-word-html-modal-card,
body.light-mode .native-word-html-modal-card {
    background: #ffffff;
    color: #000000;
    border-color: rgba(0, 0, 0, .14);
    box-shadow: 0 24px 80px rgba(0, 0, 0, .18);
}
html.light-mode .native-word-html-modal-card h3,
body.light-mode .native-word-html-modal-card h3 {
    color: #111111;
}
html.light-mode .native-word-html-modal-card p,
body.light-mode .native-word-html-modal-card p {
    color: rgba(0, 0, 0, .66);
}
html.light-mode .native-word-html-modal-close,
body.light-mode .native-word-html-modal-close {
    background: #ffffff;
    color: #000000;
    border-color: rgba(0, 0, 0, .18);
}
html.light-mode .native-word-html-modal-field span,
body.light-mode .native-word-html-modal-field span {
    color: rgba(0, 0, 0, .62);
}
@media (max-width: 620px) {
.native-word-html-modal-backdrop {
        align-items: flex-end;
        padding: 12px;
    }
.native-word-html-modal-card {
        border-radius: 18px;
    }
.native-word-html-modal-actions {
        flex-direction: column-reverse;
    }
.native-word-html-modal-actions .native-tools-btn {
        width: 100%;
    }
}
/* =========================================================
   Native Tools - WordHTML Custom Modal Input Typing Fix
   ========================================================= */

/*
   Modal-Inputs müssen wirklich normale Eingabefelder bleiben.
   Einige globale Tools-/Editor-Regeln dürfen hier nicht dazwischenfunken.
*/

.native-word-html-modal-backdrop,
.native-word-html-modal,
.native-word-html-modal-card,
.native-word-html-modal-card * {
    pointer-events: auto !important;
}
.native-word-html-modal-field input:disabled,
.native-word-html-modal-field input[readonly] {
    opacity: 1 !important;
    cursor: text !important;
}
/* =========================================================
   Native Tools - WordHTML Modal Focus + Link Button Color Fix
   ========================================================= */

/*
   Fix:
   - Modal-Inputs müssen den Fokus wirklich bekommen.
   - Der Rich-Text-Editor dahinter darf währenddessen keinen Cursor anzeigen.
   - Hyperlink-Toolbar-Button nutzt text presentation und korrektes currentColor.
*/

.native-word-html-modal-backdrop {
    z-index: 2147483000 !important;
}
.native-word-html-modal-field input {
    position: relative !important;
    z-index: 1 !important;
    pointer-events: auto !important;
    user-select: text !important;
    -webkit-user-select: text !important;
    cursor: text !important;
    caret-color: currentColor !important;
}
/* Hyperlink-Button in beiden Modi sauber einfärben */
.native-word-html-toolbar .native-word-html-link-btn,
.native-word-html-toolbar .native-word-html-link-btn span {
    color: currentColor;
    -webkit-text-fill-color: currentColor;
    font-family: Arial, Helvetica, sans-serif;
    font-weight: 950;
    text-shadow: none;
}
html:not(.light-mode) body:not(.light-mode) .native-word-html-toolbar .native-word-html-link-btn,
html:not(.light-mode) body:not(.light-mode) .native-word-html-toolbar .native-word-html-link-btn span {
    color: #ffffff;
    -webkit-text-fill-color: #ffffff;
}
html.light-mode body .native-word-html-toolbar .native-word-html-link-btn,
html.light-mode body .native-word-html-toolbar .native-word-html-link-btn span,
body.light-mode .native-word-html-toolbar .native-word-html-link-btn,
body.light-mode .native-word-html-toolbar .native-word-html-link-btn span {
    color: #000000;
    -webkit-text-fill-color: #000000;
}
/* Modal Submit-Button ebenfalls eindeutig lesbar */
.native-word-html-modal-actions [data-wordhtml-modal-submit] {
    background: #000000 !important;
    background-color: #000000 !important;
    color: #ffffff !important;
    -webkit-text-fill-color: #ffffff !important;
    border-color: #000000 !important;
}
html:not(.light-mode) body:not(.light-mode) .native-word-html-modal-actions [data-wordhtml-modal-submit] {
    background: var(--tools-accent, #e9a624) !important;
    background-color: var(--tools-accent, #e9a624) !important;
    color: #000000 !important;
    -webkit-text-fill-color: #000000 !important;
    border-color: var(--tools-accent, #e9a624) !important;
}
@media (min-width: 901px),
(orientation: landscape) and (hover: hover) and (pointer: fine) {
.native-tools-mobile-editor-open-btn,
    .native-tools-mobile-editor-modal,
    .native-word-html-mobile-groupbar,
    .native-tools-mobile-compose-wizard,
    .native-tools-mobile-image-fullscreen-btn,
    .native-tools-mobile-image-fullscreen-close {
        display: none;
    }
}
/* =========================================================
   Native Tools - Mobile Step 3: dedicated Word -> HTML mode
   Active only while the mobile shell marks the page as mobile.
   Desktop remains untouched.
   ========================================================= */
html.native-tools-mobile-mode body.tools-page .native-tools-content.native-tools-mobile-wordhtml-own-mode .native-tools-mobile-tabs,
html.native-tools-mobile-mode body.tools-page .native-word-html-mobile-dedicated .native-tools-mobile-card-toggle,
html.native-tools-mobile-mode body.tools-page .native-word-html-mobile-dedicated .native-word-html-mobile-groupbar {
    display: none;
}
html.native-tools-mobile-mode body.tools-page .native-word-html-mobile-dedicated {
    --wordhtml-mobile-radius: 16px;
    min-width: 0;
    width: 100%;
    max-width: 100%;
    overflow-x: hidden;
}
html.native-tools-mobile-mode body.tools-page .native-word-html-mobile-dedicated .native-word-html-grid {
    display: block;
    width: 100%;
    max-width: 100%;
    min-width: 0;
    overflow: visible;
}
html.native-tools-mobile-mode body.tools-page .native-word-html-mobile-dedicated .native-tools-card {
    width: 100%;
    max-width: 100%;
    min-width: 0;
    overflow: hidden;
    margin: 0 0 10px 0;
}
html.native-tools-mobile-mode body.tools-page .native-word-html-mobile-dedicated[data-wordhtml-mobile-view="editor"] .native-word-html-mobile-card-html,
html.native-tools-mobile-mode body.tools-page .native-word-html-mobile-dedicated[data-wordhtml-mobile-view="editor"] .native-word-html-mobile-card-preview,
html.native-tools-mobile-mode body.tools-page .native-word-html-mobile-dedicated[data-wordhtml-mobile-view="html"] .native-word-html-mobile-card-editor,
html.native-tools-mobile-mode body.tools-page .native-word-html-mobile-dedicated[data-wordhtml-mobile-view="html"] .native-word-html-mobile-card-preview,
html.native-tools-mobile-mode body.tools-page .native-word-html-mobile-dedicated[data-wordhtml-mobile-view="preview"] .native-word-html-mobile-card-editor,
html.native-tools-mobile-mode body.tools-page .native-word-html-mobile-dedicated[data-wordhtml-mobile-view="preview"] .native-word-html-mobile-card-html {
    display: none;
}
html.native-tools-mobile-mode body.tools-page .native-word-html-mobile-dedicated[data-wordhtml-mobile-view="editor"] .native-word-html-mobile-card-editor,
html.native-tools-mobile-mode body.tools-page .native-word-html-mobile-dedicated[data-wordhtml-mobile-view="html"] .native-word-html-mobile-card-html,
html.native-tools-mobile-mode body.tools-page .native-word-html-mobile-dedicated[data-wordhtml-mobile-view="preview"] .native-word-html-mobile-card-preview {
    display: block;
}
html.native-tools-mobile-mode body.tools-page .native-word-html-mobile-dedicated .native-word-html-editor,
html.native-tools-mobile-mode body.tools-page .native-word-html-mobile-dedicated .native-word-html-code-editor,
html.native-tools-mobile-mode body.tools-page .native-word-html-mobile-dedicated .native-word-html-mobile-preview {
    width: 100%;
    max-width: 100%;
    min-width: 0;
    border-radius: 14px;
    overflow: auto;
    -webkit-overflow-scrolling: touch;
}
html.native-tools-mobile-mode body.tools-page .native-word-html-mobile-dedicated .native-word-html-editor {
    min-height: min(58dvh, 560px);
    max-height: none;
    font-size: 16px;
    line-height: 1.45;
    padding: 14px;
    touch-action: pan-y;
}
html.native-tools-mobile-mode body.tools-page .native-word-html-mobile-dedicated .native-word-html-code-editor {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr);
    min-height: min(58dvh, 560px);
    max-height: none;
    overflow: hidden;
}
html.native-tools-mobile-mode body.tools-page .native-word-html-mobile-dedicated .native-word-html-lines {
    min-width: 36px;
    max-width: 48px;
    overflow: hidden;
    font-size: 12px;
    line-height: 1.45;
}
html.native-tools-mobile-mode body.tools-page .native-word-html-mobile-dedicated .native-word-html-code {
    min-width: 0;
    width: 100%;
    min-height: min(58dvh, 560px);
    max-height: min(66dvh, 640px);
    overflow: auto;
    white-space: pre;
    word-break: normal;
    overflow-wrap: normal;
    font-size: 14px;
    line-height: 1.45;
    touch-action: pan-x pan-y;
}
html.native-tools-mobile-mode body.tools-page .native-word-html-mobile-preview {
    min-height: min(58dvh, 560px);
    padding: 14px;
    background: rgba(0, 0, 0, 0.18);
    border: 1px solid var(--tools-border);
    color: var(--tools-text);
    line-height: 1.5;
}
html.native-tools-mobile-mode body.tools-page .native-word-html-mobile-preview.is-empty {
    display: grid;
    place-items: center;
    color: var(--tools-muted);
    text-align: center;
}
html.light-mode.native-tools-mobile-mode body.tools-page .native-word-html-mobile-preview,
body.light-mode.tools-page.native-tools-mobile-mode .native-word-html-mobile-preview {
    background: rgba(255, 255, 255, 0.72);
}
html.native-tools-mobile-mode body.tools-page .native-word-html-mobile-toolbar-backdrop {
    position: fixed;
    inset: 0;
    z-index: 420447;
    display: none;
    border: 0;
    background: rgba(0, 0, 0, 0.45);
    padding: 0;
    margin: 0;
}
html.native-tools-mobile-mode.native-wordhtml-mobile-toolbar-open body.tools-page .native-word-html-mobile-toolbar-backdrop,
body.tools-page.native-tools-mobile-mode.native-wordhtml-mobile-toolbar-open .native-word-html-mobile-toolbar-backdrop {
    display: block;
}
html.native-tools-mobile-mode body.tools-page .native-word-html-mobile-dedicated .native-word-html-toolbar.native-word-html-mobile-bottom-sheet {
    position: fixed;
    left: max(10px, env(safe-area-inset-left, 0px));
    right: max(10px, env(safe-area-inset-right, 0px));
    bottom: max(10px, env(safe-area-inset-bottom, 0px));
    z-index: 420448;
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    gap: 10px;
    max-height: min(74dvh, 560px);
    width: auto;
    max-width: none;
    min-width: 0;
    padding: 12px;
    border: 1px solid var(--tools-border);
    border-radius: 22px;
    background: color-mix(in srgb, var(--tools-card) 96%, transparent);
    box-shadow: 0 -18px 54px rgba(0, 0, 0, 0.42);
    overflow: auto;
    -webkit-overflow-scrolling: touch;
    transform: translate3d(0, calc(100% + 28px), 0);
    transition: transform 180ms ease;
    pointer-events: auto;
    backdrop-filter: blur(14px);
}
html.native-tools-mobile-mode.native-wordhtml-mobile-toolbar-open body.tools-page .native-word-html-mobile-dedicated .native-word-html-toolbar.native-word-html-mobile-bottom-sheet,
body.tools-page.native-tools-mobile-mode.native-wordhtml-mobile-toolbar-open .native-word-html-mobile-dedicated .native-word-html-toolbar.native-word-html-mobile-bottom-sheet {
    transform: translate3d(0, 0, 0);
}
html.native-tools-mobile-mode body.tools-page .native-word-html-mobile-sheet-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    padding: 2px 2px 4px 2px;
}
html.native-tools-mobile-mode body.tools-page .native-word-html-mobile-sheet-head p,
html.native-tools-mobile-mode body.tools-page .native-word-html-mobile-sheet-head h3 {
    margin: 0;
}
html.native-tools-mobile-mode body.tools-page .native-word-html-mobile-sheet-head p {
    color: var(--tools-muted);
    font-size: 12px;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: .08em;
}
html.native-tools-mobile-mode body.tools-page .native-word-html-mobile-sheet-head h3 {
    color: var(--tools-accent);
    font-size: 18px;
    font-weight: 900;
}
html.native-tools-mobile-mode body.tools-page .native-word-html-mobile-sheet-close {
    width: 42px;
    height: 42px;
    border-radius: 999px;
    border: 1px solid var(--tools-border);
    background: var(--tools-card-2);
    color: var(--tools-text);
    font-size: 26px;
    line-height: 1;
    cursor: pointer;
}
html.native-tools-mobile-mode body.tools-page .native-word-html-mobile-sheet-tabs {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 8px;
}
html.native-tools-mobile-mode body.tools-page .native-word-html-mobile-sheet-tabs button {
    min-width: 0;
    min-height: 44px;
    padding: 7px 6px;
    border-radius: 13px;
    border: 1px solid var(--tools-border);
    background: var(--tools-card-2);
    color: var(--tools-text);
    display: grid;
    place-items: center;
    gap: 2px;
    cursor: pointer;
}
html.native-tools-mobile-mode body.tools-page .native-word-html-mobile-sheet-tabs button.is-active,
html.native-tools-mobile-mode body.tools-page .native-word-html-mobile-sheet-tabs button[aria-pressed="true"] {
    border-color: var(--tools-accent) !important;
    background: var(--tools-accent) !important;
    color: #111 !important;
}
html.native-tools-mobile-mode body.tools-page .native-word-html-mobile-sheet-tabs button strong {
    max-width: 100%;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    font-size: 11px;
    line-height: 1.05;
}
html.native-tools-mobile-mode body.tools-page .native-word-html-mobile-bottom-sheet .native-word-html-toolgroup {
    display: none;
    width: 100%;
    min-width: 0;
    max-width: 100%;
    grid-template-columns: repeat(auto-fit, minmax(48px, 1fr));
    gap: 8px;
    padding: 10px;
    border: 1px solid var(--tools-border);
    border-radius: 16px;
    background: rgba(255, 255, 255, 0.045);
    overflow: visible;
}
html.native-tools-mobile-mode body.tools-page .native-word-html-mobile-dedicated[data-mobile-word-group="text"] .native-word-html-toolgroup[data-mobile-word-panel="text"],
html.native-tools-mobile-mode body.tools-page .native-word-html-mobile-dedicated[data-mobile-word-group="color"] .native-word-html-toolgroup[data-mobile-word-panel="color"],
html.native-tools-mobile-mode body.tools-page .native-word-html-mobile-dedicated[data-mobile-word-group="align"] .native-word-html-toolgroup[data-mobile-word-panel="align"],
html.native-tools-mobile-mode body.tools-page .native-word-html-mobile-dedicated[data-mobile-word-group="list"] .native-word-html-toolgroup[data-mobile-word-panel="list"],
html.native-tools-mobile-mode body.tools-page .native-word-html-mobile-dedicated[data-mobile-word-group="insert"] .native-word-html-toolgroup[data-mobile-word-panel="insert"],
html.native-tools-mobile-mode body.tools-page .native-word-html-mobile-dedicated[data-mobile-word-group="html"] .native-word-html-toolgroup[data-mobile-word-panel="html"] {
    display: grid;
}
html.native-tools-mobile-mode body.tools-page .native-word-html-mobile-bottom-sheet .native-word-html-toolgroup>span {
    grid-column: 1 / -1;
    color: var(--tools-muted);
    font-size: 12px;
    font-weight: 900;
    letter-spacing: .06em;
    text-transform: uppercase;
}
html.native-tools-mobile-mode body.tools-page .native-word-html-mobile-bottom-sheet .native-word-icon-btn,
html.native-tools-mobile-mode body.tools-page .native-word-html-mobile-bottom-sheet .native-word-html-file-label {
    width: 100%;
    min-width: 0;
    min-height: 46px;
    padding: 8px 6px;
    display: grid;
    place-items: center;
    border-radius: 13px;
}
html.native-tools-mobile-mode body.tools-page .native-word-html-mobile-bottom-sheet select,
html.native-tools-mobile-mode body.tools-page .native-word-html-mobile-bottom-sheet input[type="color"] {
    width: 100%;
    min-width: 0;
    max-width: 100%;
    height: 46px;
    border-radius: 13px;
}
html.native-tools-mobile-mode body.tools-page .native-word-html-mobile-bottom-sheet .native-word-html-font {
    grid-column: 1 / -1;
}
@media (hover: none) and (pointer: coarse) and (orientation: landscape),
(max-height: 560px) and (max-width: 1180px) {
html.native-tools-mobile-mode body.tools-page .native-word-html-mobile-dedicated .native-word-html-editor,
    html.native-tools-mobile-mode body.tools-page .native-word-html-mobile-dedicated .native-word-html-code,
    html.native-tools-mobile-mode body.tools-page .native-word-html-mobile-dedicated .native-word-html-code-editor,
    html.native-tools-mobile-mode body.tools-page .native-word-html-mobile-preview {
        min-height: 48dvh;
        max-height: 62dvh;
    }
html.native-tools-mobile-mode body.tools-page .native-word-html-mobile-dedicated .native-word-html-toolbar.native-word-html-mobile-bottom-sheet {
        left: auto;
        right: max(10px, env(safe-area-inset-right, 0px));
        top: max(10px, env(safe-area-inset-top, 0px));
        bottom: max(10px, env(safe-area-inset-bottom, 0px));
        width: min(430px, calc(100vw - 20px));
        max-height: none;
        transform: translate3d(calc(100% + 28px), 0, 0);
    }
html.native-tools-mobile-mode.native-wordhtml-mobile-toolbar-open body.tools-page .native-word-html-mobile-dedicated .native-word-html-toolbar.native-word-html-mobile-bottom-sheet,
    body.tools-page.native-tools-mobile-mode.native-wordhtml-mobile-toolbar-open .native-word-html-mobile-dedicated .native-word-html-toolbar.native-word-html-mobile-bottom-sheet {
        transform: translate3d(0, 0, 0);
    }
}

/* Remaining extracted Word -> HTML rules */
.word-align-left {
    align-items: flex-start;
}
.word-align-left i:nth-child(1) {
    width: 20px;
}
.word-align-left i:nth-child(2) {
    width: 14px;
}
.word-align-left i:nth-child(3) {
    width: 18px;
}
.word-align-center {
    align-items: center;
}
.word-align-center i:nth-child(1) {
    width: 20px;
}
.word-align-center i:nth-child(2) {
    width: 14px;
}
.word-align-center i:nth-child(3) {
    width: 18px;
}
.word-align-right {
    align-items: flex-end;
}
.word-align-right i:nth-child(1) {
    width: 20px;
}
.word-align-right i:nth-child(2) {
    width: 14px;
}
.word-align-right i:nth-child(3) {
    width: 18px;
}

/* Remaining extracted Word -> HTML media rules */
/* Mobile/kleine Breiten:
   weiterhin keine internen Umbrüche, sondern horizontaler Scrollbalken */
@media (max-width: 900px) {

    .native-word-html-toolbar>.native-word-html-toolgroup,
    .native-word-html-toolbar>.native-word-html-toolgroup-text,
    .native-word-html-toolbar>.native-word-html-toolgroup-color,
    .native-word-html-toolbar>.native-word-html-toolgroup:nth-child(3),
    .native-word-html-toolbar>.native-word-html-toolgroup:nth-child(4),
    .native-word-html-toolbar>.native-word-html-toolgroup:nth-child(5),
    .native-word-html-toolbar>.native-word-html-toolgroup:nth-child(6) {
        width: max-content;
        min-width: max-content;
        max-width: none;
        height: 96px;
        max-height: 96px;
    }
}

/* Auf sehr kleinen Displays bleiben die Kacheln umbruchfähig statt horizontal zu scrollen. */
@media (max-width: 900px) {
    .native-word-html-toolbar {
        flex-wrap: wrap;
        overflow-x: hidden;
    }

    .native-word-html-toolbar>.native-word-html-toolgroup,
    .native-word-html-toolbar>.native-word-html-toolgroup-text,
    .native-word-html-toolbar>.native-word-html-toolgroup-color,
    .native-word-html-toolbar>.native-word-html-toolgroup:nth-child(3),
    .native-word-html-toolbar>.native-word-html-toolgroup:nth-child(4),
    .native-word-html-toolbar>.native-word-html-toolgroup:nth-child(5),
    .native-word-html-toolbar>.native-word-html-toolgroup:nth-child(6) {
        flex: 0 0 auto;
    }
}

/* =========================================================
   Word -> HTML - Smartphone final layout guard
   ========================================================= */
@media (max-width: 900px), (hover: none) and (pointer: coarse) {
    html.native-tools-mobile-mode body.tools-page.native-wordhtml-mobile-active #native-tools-content[data-current-tool="word-html"] {
        padding-bottom: calc(var(--native-tools-mobile-shell-height, 78px) + env(safe-area-inset-bottom, 0px) + 14px);
        overflow-x: hidden;
    }

    html.native-tools-mobile-mode body.tools-page.native-wordhtml-mobile-active .native-word-html-mobile-dedicated,
    html.native-tools-mobile-mode body.tools-page.native-wordhtml-mobile-active .native-word-html-mobile-dedicated * {
        box-sizing: border-box;
    }

    html.native-tools-mobile-mode body.tools-page.native-wordhtml-mobile-active .native-word-html-mobile-dedicated {
        display: block;
        width: 100%;
        max-width: 100%;
        min-width: 0;
        overflow-x: hidden;
    }

    html.native-tools-mobile-mode body.tools-page.native-wordhtml-mobile-active .native-word-html-mobile-dedicated .native-word-html-grid,
    html.native-tools-mobile-mode body.tools-page.native-wordhtml-mobile-active .native-word-html-mobile-dedicated .native-tools-card-grid {
        display: block;
        width: 100%;
        max-width: 100%;
        min-width: 0;
        overflow: visible;
    }

    html.native-tools-mobile-mode body.tools-page.native-wordhtml-mobile-active .native-word-html-mobile-dedicated .native-tools-card {
        width: 100%;
        min-width: 0;
        max-width: 100%;
        margin: 0 0 10px;
        overflow: hidden;
        padding: 12px;
    }

    html.native-tools-mobile-mode body.tools-page.native-wordhtml-mobile-active .native-word-html-mobile-dedicated[data-wordhtml-mobile-view="editor"] .native-word-html-mobile-card-html,
    html.native-tools-mobile-mode body.tools-page.native-wordhtml-mobile-active .native-word-html-mobile-dedicated[data-wordhtml-mobile-view="editor"] .native-word-html-mobile-card-preview,
    html.native-tools-mobile-mode body.tools-page.native-wordhtml-mobile-active .native-word-html-mobile-dedicated[data-wordhtml-mobile-view="html"] .native-word-html-mobile-card-editor,
    html.native-tools-mobile-mode body.tools-page.native-wordhtml-mobile-active .native-word-html-mobile-dedicated[data-wordhtml-mobile-view="html"] .native-word-html-mobile-card-preview,
    html.native-tools-mobile-mode body.tools-page.native-wordhtml-mobile-active .native-word-html-mobile-dedicated[data-wordhtml-mobile-view="preview"] .native-word-html-mobile-card-editor,
    html.native-tools-mobile-mode body.tools-page.native-wordhtml-mobile-active .native-word-html-mobile-dedicated[data-wordhtml-mobile-view="preview"] .native-word-html-mobile-card-html {
        display: none;
    }

    html.native-tools-mobile-mode body.tools-page.native-wordhtml-mobile-active .native-word-html-mobile-dedicated .native-word-html-editor,
    html.native-tools-mobile-mode body.tools-page.native-wordhtml-mobile-active .native-word-html-mobile-dedicated .native-word-html-code-editor,
    html.native-tools-mobile-mode body.tools-page.native-wordhtml-mobile-active .native-word-html-mobile-dedicated .native-word-html-code,
    html.native-tools-mobile-mode body.tools-page.native-wordhtml-mobile-active .native-word-html-mobile-preview {
        width: 100%;
        min-width: 0;
        max-width: 100%;
        min-height: calc(100dvh - var(--global-nav-height, 64px) - var(--native-tools-mobile-shell-height, 78px) - 185px);
        height: calc(100dvh - var(--global-nav-height, 64px) - var(--native-tools-mobile-shell-height, 78px) - 185px);
        max-height: none;
        overflow: auto;
        -webkit-overflow-scrolling: touch;
    }

    html.native-tools-mobile-mode body.tools-page.native-wordhtml-mobile-active .native-word-html-mobile-dedicated .native-word-html-code-editor {
        display: grid;
        grid-template-columns: 44px minmax(0, 1fr);
    }

    html.native-tools-mobile-mode body.tools-page.native-wordhtml-mobile-active .native-word-html-mobile-dedicated .native-word-html-lines {
        width: 44px;
        min-width: 44px;
        padding-right: 8px;
        font-size: 12px;
    }

    html.native-tools-mobile-mode body.tools-page.native-wordhtml-mobile-active .native-word-html-mobile-toolbar-backdrop {
        position: fixed !important;
        inset: 0 !important;
        z-index: 420447 !important;
        display: none !important;
        border: 0 !important;
        background: rgba(0, 0, 0, .45) !important;
        padding: 0 !important;
        margin: 0 !important;
    }

    html.native-tools-mobile-mode.native-wordhtml-mobile-toolbar-open body.tools-page.native-wordhtml-mobile-active .native-word-html-mobile-toolbar-backdrop,
    body.tools-page.native-tools-mobile-mode.native-wordhtml-mobile-toolbar-open.native-wordhtml-mobile-active .native-word-html-mobile-toolbar-backdrop {
        display: block !important;
    }

    html.native-tools-mobile-mode body.tools-page.native-wordhtml-mobile-active .native-word-html-mobile-dedicated .native-word-html-toolbar.native-word-html-mobile-bottom-sheet {
        position: fixed;
        left: max(10px, env(safe-area-inset-left, 0px));
        right: max(10px, env(safe-area-inset-right, 0px));
        bottom: max(10px, env(safe-area-inset-bottom, 0px));
        z-index: 420448;
        display: grid;
        grid-template-columns: minmax(0, 1fr);
        gap: 10px;
        width: auto;
        min-width: 0;
        max-width: none;
        max-height: min(74dvh, 560px);
        padding: 12px;
        border: 1px solid var(--tools-border);
        border-radius: 22px;
        background: color-mix(in srgb, var(--tools-card) 97%, transparent);
        box-shadow: 0 -18px 54px rgba(0, 0, 0, .46);
        overflow: auto;
        -webkit-overflow-scrolling: touch;
        transform: translate3d(0, calc(100% + 28px), 0);
        transition: transform 180ms ease;
        pointer-events: auto;
        backdrop-filter: blur(14px);
        -webkit-backdrop-filter: blur(14px);
        flex-wrap: initial;
    }

    html.native-tools-mobile-mode.native-wordhtml-mobile-toolbar-open body.tools-page.native-wordhtml-mobile-active .native-word-html-mobile-dedicated .native-word-html-toolbar.native-word-html-mobile-bottom-sheet,
    body.tools-page.native-tools-mobile-mode.native-wordhtml-mobile-toolbar-open.native-wordhtml-mobile-active .native-word-html-mobile-dedicated .native-word-html-toolbar.native-word-html-mobile-bottom-sheet {
        transform: translate3d(0, 0, 0);
    }

    html.native-tools-mobile-mode body.tools-page.native-wordhtml-mobile-active .native-word-html-mobile-bottom-sheet .native-word-html-toolgroup {
        display: none;
        width: 100%;
        min-width: 0;
        max-width: 100%;
        height: auto;
        min-height: 0;
        max-height: none;
        grid-template-columns: repeat(auto-fit, minmax(48px, 1fr));
        gap: 8px;
        padding: 10px;
        border: 1px solid var(--tools-border);
        border-radius: 16px;
        background: rgba(255, 255, 255, .045);
        overflow: visible;
    }

    html.native-tools-mobile-mode body.tools-page.native-wordhtml-mobile-active .native-word-html-mobile-dedicated[data-mobile-word-group="text"] .native-word-html-toolgroup[data-mobile-word-panel="text"],
    html.native-tools-mobile-mode body.tools-page.native-wordhtml-mobile-active .native-word-html-mobile-dedicated[data-mobile-word-group="color"] .native-word-html-toolgroup[data-mobile-word-panel="color"],
    html.native-tools-mobile-mode body.tools-page.native-wordhtml-mobile-active .native-word-html-mobile-dedicated[data-mobile-word-group="align"] .native-word-html-toolgroup[data-mobile-word-panel="align"],
    html.native-tools-mobile-mode body.tools-page.native-wordhtml-mobile-active .native-word-html-mobile-dedicated[data-mobile-word-group="list"] .native-word-html-toolgroup[data-mobile-word-panel="list"],
    html.native-tools-mobile-mode body.tools-page.native-wordhtml-mobile-active .native-word-html-mobile-dedicated[data-mobile-word-group="insert"] .native-word-html-toolgroup[data-mobile-word-panel="insert"],
    html.native-tools-mobile-mode body.tools-page.native-wordhtml-mobile-active .native-word-html-mobile-dedicated[data-mobile-word-group="html"] .native-word-html-toolgroup[data-mobile-word-panel="html"] {
        display: grid;
    }
}


/* =========================================================
   Mobile cleanup: Word -> HTML ohne Vorschau / ohne sticky Kopf
   ========================================================= */
html.native-tools-mobile-mode body.tools-page.native-wordhtml-mobile-active .native-tools-header,
body.tools-page.native-tools-mobile-mode.native-wordhtml-mobile-active .native-tools-header,
html.native-tools-mobile-mode body.tools-page.native-wordhtml-mobile-active .native-tools-status,
body.tools-page.native-tools-mobile-mode.native-wordhtml-mobile-active .native-tools-status {
    position: static;
    top: auto;
    z-index: auto;
    margin-bottom: 10px;
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
}


/* =========================================================
   Word -> HTML Mobile finalization: dedicated Editor/HTML mode
   ========================================================= */
html.native-tools-mobile-mode body.tools-page.native-wordhtml-mobile-active #native-tools-content[data-current-tool="word-html"],
body.tools-page.native-tools-mobile-mode.native-wordhtml-mobile-active #native-tools-content[data-current-tool="word-html"] {
    overflow-x: hidden;
}

html.native-tools-mobile-mode body.tools-page.native-wordhtml-mobile-active .native-word-html-mobile-dedicated,
body.tools-page.native-tools-mobile-mode.native-wordhtml-mobile-active .native-word-html-mobile-dedicated {
    display: block;
    width: 100%;
    max-width: 100%;
    min-width: 0;
    overflow-x: hidden;
}

html.native-tools-mobile-mode body.tools-page.native-wordhtml-mobile-active .native-word-html-mobile-viewbar [data-wordhtml-mobile-view="preview"],
body.tools-page.native-tools-mobile-mode.native-wordhtml-mobile-active .native-word-html-mobile-viewbar [data-wordhtml-mobile-view="preview"],
html.native-tools-mobile-mode body.tools-page.native-wordhtml-mobile-active .native-word-html-mobile-card-preview,
body.tools-page.native-tools-mobile-mode.native-wordhtml-mobile-active .native-word-html-mobile-card-preview,
html.native-tools-mobile-mode body.tools-page.native-wordhtml-mobile-active #native-word-html-mobile-preview-card,
body.tools-page.native-tools-mobile-mode.native-wordhtml-mobile-active #native-word-html-mobile-preview-card,
html.native-tools-mobile-mode body.tools-page.native-wordhtml-mobile-active #native-word-html-mobile-preview,
body.tools-page.native-tools-mobile-mode.native-wordhtml-mobile-active #native-word-html-mobile-preview,
html.native-tools-mobile-mode body.tools-page.native-wordhtml-mobile-active .native-tools-mobile-output-open-btn,
body.tools-page.native-tools-mobile-mode.native-wordhtml-mobile-active .native-tools-mobile-output-open-btn {
    display: none;
}

html.native-tools-mobile-mode body.tools-page.native-wordhtml-mobile-active .native-word-html-mobile-dedicated[data-wordhtml-mobile-view="editor"] .native-word-html-mobile-card-html,
body.tools-page.native-tools-mobile-mode.native-wordhtml-mobile-active .native-word-html-mobile-dedicated[data-wordhtml-mobile-view="editor"] .native-word-html-mobile-card-html,
html.native-tools-mobile-mode body.tools-page.native-wordhtml-mobile-active .native-word-html-mobile-dedicated[data-wordhtml-mobile-view="html"] .native-word-html-mobile-card-editor,
body.tools-page.native-tools-mobile-mode.native-wordhtml-mobile-active .native-word-html-mobile-dedicated[data-wordhtml-mobile-view="html"] .native-word-html-mobile-card-editor {
    display: none !important;
}

html.native-tools-mobile-mode body.tools-page.native-wordhtml-mobile-active .native-word-html-mobile-dedicated[data-wordhtml-mobile-view="editor"] .native-word-html-mobile-card-editor,
body.tools-page.native-tools-mobile-mode.native-wordhtml-mobile-active .native-word-html-mobile-dedicated[data-wordhtml-mobile-view="editor"] .native-word-html-mobile-card-editor,
html.native-tools-mobile-mode body.tools-page.native-wordhtml-mobile-active .native-word-html-mobile-dedicated[data-wordhtml-mobile-view="html"] .native-word-html-mobile-card-html,
body.tools-page.native-tools-mobile-mode.native-wordhtml-mobile-active .native-word-html-mobile-dedicated[data-wordhtml-mobile-view="html"] .native-word-html-mobile-card-html {
    display: block !important;
}

html.native-tools-mobile-mode body.tools-page.native-wordhtml-mobile-active .native-word-html-mobile-dedicated .native-word-html-grid,
body.tools-page.native-tools-mobile-mode.native-wordhtml-mobile-active .native-word-html-mobile-dedicated .native-word-html-grid {
    display: block !important;
    width: 100%;
    min-width: 0;
    max-width: 100%;
    overflow: visible;
}

html.native-tools-mobile-mode body.tools-page.native-wordhtml-mobile-active .native-word-html-mobile-dedicated .native-tools-card,
body.tools-page.native-tools-mobile-mode.native-wordhtml-mobile-active .native-word-html-mobile-dedicated .native-tools-card {
    width: 100%;
    min-width: 0;
    max-width: 100%;
    margin: 0 0 10px 0;
}

html.native-tools-mobile-mode body.tools-page.native-wordhtml-mobile-active .native-word-html-mobile-dedicated .native-word-html-editor,
body.tools-page.native-tools-mobile-mode.native-wordhtml-mobile-active .native-word-html-mobile-dedicated .native-word-html-editor,
html.native-tools-mobile-mode body.tools-page.native-wordhtml-mobile-active .native-word-html-mobile-dedicated .native-word-html-code-editor,
body.tools-page.native-tools-mobile-mode.native-wordhtml-mobile-active .native-word-html-mobile-dedicated .native-word-html-code-editor,
html.native-tools-mobile-mode body.tools-page.native-wordhtml-mobile-active .native-word-html-mobile-dedicated .native-word-html-code,
body.tools-page.native-tools-mobile-mode.native-wordhtml-mobile-active .native-word-html-mobile-dedicated .native-word-html-code {
    width: 100%;
    min-width: 0;
    max-width: 100%;
    min-height: calc(100dvh - var(--global-nav-height, 64px) - var(--native-tools-mobile-shell-height, 78px) - 190px) !important;
    height: calc(100dvh - var(--global-nav-height, 64px) - var(--native-tools-mobile-shell-height, 78px) - 190px);
    max-height: none !important;
    overflow: auto;
    -webkit-overflow-scrolling: touch;
}

html.native-tools-mobile-mode body.tools-page.native-wordhtml-mobile-active .native-word-html-mobile-dedicated .native-word-html-editor,
body.tools-page.native-tools-mobile-mode.native-wordhtml-mobile-active .native-word-html-mobile-dedicated .native-word-html-editor {
    font-size: 16px;
    line-height: 1.45;
    padding: 14px;
    touch-action: pan-y;
}

html.native-tools-mobile-mode body.tools-page.native-wordhtml-mobile-active .native-word-html-mobile-dedicated .native-word-html-lines,
body.tools-page.native-tools-mobile-mode.native-wordhtml-mobile-active .native-word-html-mobile-dedicated .native-word-html-lines {
    padding-right: 8px;
}

html.native-tools-mobile-mode body.tools-page.native-wordhtml-mobile-active .native-word-html-mobile-dedicated .native-word-html-code,
body.tools-page.native-tools-mobile-mode.native-wordhtml-mobile-active .native-word-html-mobile-dedicated .native-word-html-code {
    touch-action: pan-x pan-y;
}

html.native-tools-mobile-mode body.tools-page.native-wordhtml-mobile-active .native-word-html-mobile-dedicated .native-word-html-toolbar.native-word-html-mobile-bottom-sheet,
body.tools-page.native-tools-mobile-mode.native-wordhtml-mobile-active .native-word-html-mobile-dedicated .native-word-html-toolbar.native-word-html-mobile-bottom-sheet {
    pointer-events: none;
    transform: translate3d(0, calc(100% + 28px), 0);
    flex-wrap: initial;
    overflow-x: hidden;
    overflow-y: auto;
}

html.native-tools-mobile-mode body.tools-page.native-wordhtml-mobile-active .native-word-html-mobile-bottom-sheet .native-word-html-toolgroup,
body.tools-page.native-tools-mobile-mode.native-wordhtml-mobile-active .native-word-html-mobile-bottom-sheet .native-word-html-toolgroup {
    display: none;
    width: 100%;
    min-width: 0;
    max-width: 100%;
    height: auto;
    min-height: 0;
    max-height: none;
    grid-template-columns: repeat(auto-fit, minmax(48px, 1fr));
    gap: 8px;
    overflow: visible;
}

html.native-tools-mobile-mode body.tools-page.native-wordhtml-mobile-active .native-word-html-mobile-dedicated[data-mobile-word-group="text"] .native-word-html-toolgroup[data-mobile-word-panel="text"],
body.tools-page.native-tools-mobile-mode.native-wordhtml-mobile-active .native-word-html-mobile-dedicated[data-mobile-word-group="text"] .native-word-html-toolgroup[data-mobile-word-panel="text"],
html.native-tools-mobile-mode body.tools-page.native-wordhtml-mobile-active .native-word-html-mobile-dedicated[data-mobile-word-group="color"] .native-word-html-toolgroup[data-mobile-word-panel="color"],
body.tools-page.native-tools-mobile-mode.native-wordhtml-mobile-active .native-word-html-mobile-dedicated[data-mobile-word-group="color"] .native-word-html-toolgroup[data-mobile-word-panel="color"],
html.native-tools-mobile-mode body.tools-page.native-wordhtml-mobile-active .native-word-html-mobile-dedicated[data-mobile-word-group="align"] .native-word-html-toolgroup[data-mobile-word-panel="align"],
body.tools-page.native-tools-mobile-mode.native-wordhtml-mobile-active .native-word-html-mobile-dedicated[data-mobile-word-group="align"] .native-word-html-toolgroup[data-mobile-word-panel="align"],
html.native-tools-mobile-mode body.tools-page.native-wordhtml-mobile-active .native-word-html-mobile-dedicated[data-mobile-word-group="list"] .native-word-html-toolgroup[data-mobile-word-panel="list"],
body.tools-page.native-tools-mobile-mode.native-wordhtml-mobile-active .native-word-html-mobile-dedicated[data-mobile-word-group="list"] .native-word-html-toolgroup[data-mobile-word-panel="list"],
html.native-tools-mobile-mode body.tools-page.native-wordhtml-mobile-active .native-word-html-mobile-dedicated[data-mobile-word-group="insert"] .native-word-html-toolgroup[data-mobile-word-panel="insert"],
body.tools-page.native-tools-mobile-mode.native-wordhtml-mobile-active .native-word-html-mobile-dedicated[data-mobile-word-group="insert"] .native-word-html-toolgroup[data-mobile-word-panel="insert"],
html.native-tools-mobile-mode body.tools-page.native-wordhtml-mobile-active .native-word-html-mobile-dedicated[data-mobile-word-group="html"] .native-word-html-toolgroup[data-mobile-word-panel="html"],
body.tools-page.native-tools-mobile-mode.native-wordhtml-mobile-active .native-word-html-mobile-dedicated[data-mobile-word-group="html"] .native-word-html-toolgroup[data-mobile-word-panel="html"] {
    display: grid;
}

@media (hover: none) and (pointer: coarse) and (orientation: landscape),
(max-height: 560px) and (max-width: 1180px) {
    html.native-tools-mobile-mode body.tools-page.native-wordhtml-mobile-active .native-word-html-mobile-dedicated .native-word-html-toolbar.native-word-html-mobile-bottom-sheet,
    body.tools-page.native-tools-mobile-mode.native-wordhtml-mobile-active .native-word-html-mobile-dedicated .native-word-html-toolbar.native-word-html-mobile-bottom-sheet {
        pointer-events: none;
        transform: translate3d(calc(100% + 28px), 0, 0);
    }

    html.native-tools-mobile-mode.native-wordhtml-mobile-toolbar-open body.tools-page.native-wordhtml-mobile-active .native-word-html-mobile-dedicated .native-word-html-toolbar.native-word-html-mobile-bottom-sheet,
    body.tools-page.native-tools-mobile-mode.native-wordhtml-mobile-toolbar-open.native-wordhtml-mobile-active .native-word-html-mobile-dedicated .native-word-html-toolbar.native-word-html-mobile-bottom-sheet {
        pointer-events: auto;
        transform: translate3d(0, 0, 0);
    }
}

/* =========================================================
   Word -> HTML Mobile - V2 stable HTML line gutter
   ========================================================= */
html.native-tools-mobile-mode body.tools-page.native-wordhtml-mobile-active .native-word-html-mobile-dedicated .native-word-html-code-editor,
body.tools-page.native-tools-mobile-mode.native-wordhtml-mobile-active .native-word-html-mobile-dedicated .native-word-html-code-editor {
    display: grid;
    grid-template-columns: 44px minmax(0, 1fr);
    grid-template-rows: minmax(0, 1fr);
    align-items: stretch;
    overflow: hidden;
}

html.native-tools-mobile-mode body.tools-page.native-wordhtml-mobile-active .native-word-html-mobile-dedicated .native-word-html-lines,
body.tools-page.native-tools-mobile-mode.native-wordhtml-mobile-active .native-word-html-mobile-dedicated .native-word-html-lines,
html.native-tools-mobile-mode body.tools-page.native-wordhtml-mobile-active .native-word-html-mobile-dedicated .native-word-html-code,
body.tools-page.native-tools-mobile-mode.native-wordhtml-mobile-active .native-word-html-mobile-dedicated .native-word-html-code {
    grid-row: 1;
    align-self: stretch;
    height: 100%;
    min-height: 100% !important;
    max-height: none;
    font-family: Consolas, Monaco, 'Courier New', monospace;
    font-size: 13px;
    line-height: 1.45;
}

html.native-tools-mobile-mode body.tools-page.native-wordhtml-mobile-active .native-word-html-mobile-dedicated .native-word-html-lines,
body.tools-page.native-tools-mobile-mode.native-wordhtml-mobile-active .native-word-html-mobile-dedicated .native-word-html-lines {
    grid-column: 1;
    box-sizing: border-box;
    width: 44px;
    min-width: 44px;
    max-width: 44px !important;
    padding: 14px 8px 14px 0;
    overflow: hidden;
    white-space: pre;
    background: #080b10 !important;
    border-right: 1px solid rgba(255, 255, 255, .10);
}

html.native-tools-mobile-mode body.tools-page.native-wordhtml-mobile-active .native-word-html-mobile-dedicated .native-word-html-code,
body.tools-page.native-tools-mobile-mode.native-wordhtml-mobile-active .native-word-html-mobile-dedicated .native-word-html-code {
    grid-column: 2;
    box-sizing: border-box;
    margin: 0;
    padding: 14px;
    overflow: auto;
    white-space: pre;
    word-break: normal;
    overflow-wrap: normal;
    scrollbar-gutter: stable both-edges;
}

html.light-mode.native-tools-mobile-mode body.tools-page.native-wordhtml-mobile-active .native-word-html-mobile-dedicated .native-word-html-lines,
body.light-mode.tools-page.native-tools-mobile-mode.native-wordhtml-mobile-active .native-word-html-mobile-dedicated .native-word-html-lines {
    background: #eef1f4 !important;
    border-right-color: rgba(0, 0, 0, .12);
}

/* =========================================================
   Word -> HTML Mobile - lokale Button-Bar wie Image-Editor
   ========================================================= */
html.native-tools-mobile-mode.native-wordhtml-mobile-local-shell-active body.tools-page.native-wordhtml-mobile-active #native-tools-mobile-shell,
body.tools-page.native-tools-mobile-mode.native-wordhtml-mobile-local-shell-active.native-wordhtml-mobile-active #native-tools-mobile-shell,
body.tools-page.native-wordhtml-mobile-active #native-tools-mobile-shell.native-word-html-mobile-generic-shell-hidden {
    display: none;
    pointer-events: none;
    opacity: 0;
    visibility: hidden;
}

html.native-tools-mobile-mode body.tools-page.native-wordhtml-mobile-active .native-word-html-mobile-viewbar,
body.tools-page.native-tools-mobile-mode.native-wordhtml-mobile-active .native-word-html-mobile-viewbar {
    display: none;
}

html.native-tools-mobile-mode body.tools-page.native-wordhtml-mobile-active .native-word-html-mobile-bar,
body.tools-page.native-tools-mobile-mode.native-wordhtml-mobile-active .native-word-html-mobile-bar {
    position: fixed;
    display: grid;
    grid-template-columns: repeat(5, minmax(0, 1fr));
    gap: 6px;
    min-height: var(--native-tools-mobile-shell-height, 78px);
    padding: 8px;
    border: 1px solid rgba(255, 255, 255, .09);
    border-radius: 22px;
    background: rgba(17, 17, 17, .94);
    box-shadow: 0 -18px 46px rgba(0, 0, 0, .45);
    backdrop-filter: blur(18px);
    -webkit-backdrop-filter: blur(18px);
    box-sizing: border-box;
}

body.light-mode.tools-page.native-tools-mobile-mode.native-wordhtml-mobile-active .native-word-html-mobile-bar,
html.light-mode.native-tools-mobile-mode body.tools-page.native-wordhtml-mobile-active .native-word-html-mobile-bar {
    border-color: rgba(0, 0, 0, .12);
    background: rgba(255, 255, 255, .94);
    box-shadow: 0 -18px 46px rgba(0, 0, 0, .16);
}

html.native-tools-mobile-mode body.tools-page.native-wordhtml-mobile-active .native-word-html-mobile-bar button,
body.tools-page.native-tools-mobile-mode.native-wordhtml-mobile-active .native-word-html-mobile-bar button {
    min-width: 0;
    min-height: 56px;
    padding: 6px 4px;
    border: 1px solid transparent;
    border-radius: 16px;
    background: transparent;
    color: var(--tools-text);
    display: grid;
    grid-template-rows: auto auto;
    place-items: center;
    gap: 3px;
    font: inherit;
    font-weight: 900;
    cursor: pointer;
    -webkit-tap-highlight-color: transparent;
    box-sizing: border-box;
}

html.native-tools-mobile-mode body.tools-page.native-wordhtml-mobile-active .native-word-html-mobile-bar button span,
body.tools-page.native-tools-mobile-mode.native-wordhtml-mobile-active .native-word-html-mobile-bar button span {
    font-size: 19px;
    line-height: 1;
}

html.native-tools-mobile-mode body.tools-page.native-wordhtml-mobile-active .native-word-html-mobile-bar button strong,
body.tools-page.native-tools-mobile-mode.native-wordhtml-mobile-active .native-word-html-mobile-bar button strong {
    max-width: 100%;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    font-size: 11px;
    line-height: 1.05;
    font-weight: 950;
}

html.native-tools-mobile-mode body.tools-page.native-wordhtml-mobile-active .native-word-html-mobile-bar button.is-active,
html.native-tools-mobile-mode body.tools-page.native-wordhtml-mobile-active .native-word-html-mobile-bar button[aria-pressed="true"],
body.tools-page.native-tools-mobile-mode.native-wordhtml-mobile-active .native-word-html-mobile-bar button.is-active,
body.tools-page.native-tools-mobile-mode.native-wordhtml-mobile-active .native-word-html-mobile-bar button[aria-pressed="true"] {
    border-color: var(--tools-accent) !important;
    background: color-mix(in srgb, var(--tools-accent) 15%, transparent) !important;
    box-shadow: inset 0 -3px 0 var(--tools-accent), 0 0 0 1px rgba(233, 166, 36, .22) !important;
}

html.native-tools-mobile-mode body.tools-page.native-wordhtml-mobile-active .native-word-html-mobile-bottom-sheet .native-word-html-toolgroup[data-mobile-word-panel="html"],
body.tools-page.native-tools-mobile-mode.native-wordhtml-mobile-active .native-word-html-mobile-bottom-sheet .native-word-html-toolgroup[data-mobile-word-panel="html"],
html.native-tools-mobile-mode body.tools-page.native-wordhtml-mobile-active .native-word-html-mobile-sheet-tabs [data-mobile-word-group="html"],
body.tools-page.native-tools-mobile-mode.native-wordhtml-mobile-active .native-word-html-mobile-sheet-tabs [data-mobile-word-group="html"] {
    display: none;
}

/* =========================================================
   Word -> HTML Mobile - V7 Bottom-Bar + Text-Panel
   Ziel: lokale Bar bleibt unten/zentriert; Text-Panel zeigt alle Optionen.
   ========================================================= */
html.native-tools-mobile-mode body.tools-page.native-wordhtml-mobile-active .native-word-html-mobile-bar,
body.tools-page.native-tools-mobile-mode.native-wordhtml-mobile-active .native-word-html-mobile-bar {
    left: 50%;
    right: auto;
    width: min(calc(100vw - 20px), 560px);
    max-width: min(calc(100vw - 20px), 560px);
    transform: translateX(-50%);
}

html.native-tools-mobile-mode body.tools-page.native-wordhtml-mobile-toolbar-open.native-wordhtml-mobile-active .native-word-html-mobile-dedicated .native-word-html-toolbar.native-word-html-mobile-bottom-sheet,
body.tools-page.native-tools-mobile-mode.native-wordhtml-mobile-toolbar-open.native-wordhtml-mobile-active .native-word-html-mobile-dedicated .native-word-html-toolbar.native-word-html-mobile-bottom-sheet,
html.native-tools-mobile-mode body.tools-page.native-wordhtml-mobile-active .native-word-html-mobile-dedicated .native-word-html-toolbar.native-word-html-mobile-bottom-sheet,
body.tools-page.native-tools-mobile-mode.native-wordhtml-mobile-active .native-word-html-mobile-dedicated .native-word-html-toolbar.native-word-html-mobile-bottom-sheet {
    left: 50%;
    right: auto;
    top: auto;
    bottom: calc(var(--native-tools-mobile-shell-height, 78px) + var(--log-height, 0px) + max(10px, env(safe-area-inset-bottom, 0px)) + 10px);
    width: min(calc(100vw - 20px), 560px);
    max-width: min(calc(100vw - 20px), 560px);
    max-height: min(66dvh, 520px);
    transform: translate3d(-50%, calc(100% + var(--native-tools-mobile-shell-height, 78px) + 42px), 0);
}

html.native-tools-mobile-mode body.tools-page.native-wordhtml-mobile-active .native-word-html-mobile-bottom-sheet .native-word-html-toolgroup-text,
body.tools-page.native-tools-mobile-mode.native-wordhtml-mobile-active .native-word-html-mobile-bottom-sheet .native-word-html-toolgroup-text {
    display: none;
    grid-template-columns: repeat(6, minmax(38px, 1fr));
    grid-auto-rows: auto;
    align-items: center;
    width: 100%;
    min-width: 0;
    max-width: 100%;
    gap: 8px;
}

html.native-tools-mobile-mode body.tools-page.native-wordhtml-mobile-active .native-word-html-mobile-dedicated[data-mobile-word-group="text"] .native-word-html-toolgroup-text[data-mobile-word-panel="text"],
body.tools-page.native-tools-mobile-mode.native-wordhtml-mobile-active .native-word-html-mobile-dedicated[data-mobile-word-group="text"] .native-word-html-toolgroup-text[data-mobile-word-panel="text"] {
    display: grid;
}

html.native-tools-mobile-mode body.tools-page.native-wordhtml-mobile-active .native-word-html-mobile-bottom-sheet .native-word-html-toolgroup-text > span,
body.tools-page.native-tools-mobile-mode.native-wordhtml-mobile-active .native-word-html-mobile-bottom-sheet .native-word-html-toolgroup-text > span {
    grid-column: 1 / -1;
    grid-row: 1;
}

html.native-tools-mobile-mode body.tools-page.native-wordhtml-mobile-active .native-word-html-mobile-bottom-sheet .native-word-html-toolgroup-text .native-word-html-size,
body.tools-page.native-tools-mobile-mode.native-wordhtml-mobile-active .native-word-html-mobile-bottom-sheet .native-word-html-toolgroup-text .native-word-html-size {
    grid-column: 1 / span 2;
    grid-row: 2;
    width: 100%;
    min-width: 0;
    max-width: 100%;
    justify-self: stretch;
}

html.native-tools-mobile-mode body.tools-page.native-wordhtml-mobile-active .native-word-html-mobile-bottom-sheet .native-word-html-toolgroup-text .native-word-html-font,
body.tools-page.native-tools-mobile-mode.native-wordhtml-mobile-active .native-word-html-mobile-bottom-sheet .native-word-html-toolgroup-text .native-word-html-font {
    grid-column: 3 / span 3;
    grid-row: 2;
    width: 100%;
    min-width: 0;
    max-width: 240px;
    justify-self: stretch;
}

html.native-tools-mobile-mode body.tools-page.native-wordhtml-mobile-active .native-word-html-mobile-bottom-sheet .native-word-html-toolgroup-text .native-word-icon-btn,
body.tools-page.native-tools-mobile-mode.native-wordhtml-mobile-active .native-word-html-mobile-bottom-sheet .native-word-html-toolgroup-text .native-word-icon-btn {
    grid-row: 3;
    width: 100%;
    min-width: 0;
    max-width: 100%;
    justify-self: stretch;
    align-self: stretch;
}

html.native-tools-mobile-mode body.tools-page.native-wordhtml-mobile-active .native-word-html-mobile-bottom-sheet .native-word-html-toolgroup-text .native-word-icon-btn:nth-of-type(1),
body.tools-page.native-tools-mobile-mode.native-wordhtml-mobile-active .native-word-html-mobile-bottom-sheet .native-word-html-toolgroup-text .native-word-icon-btn:nth-of-type(1) {
    grid-column: 1;
}

html.native-tools-mobile-mode body.tools-page.native-wordhtml-mobile-active .native-word-html-mobile-bottom-sheet .native-word-html-toolgroup-text .native-word-icon-btn:nth-of-type(2),
body.tools-page.native-tools-mobile-mode.native-wordhtml-mobile-active .native-word-html-mobile-bottom-sheet .native-word-html-toolgroup-text .native-word-icon-btn:nth-of-type(2) {
    grid-column: 2;
}

html.native-tools-mobile-mode body.tools-page.native-wordhtml-mobile-active .native-word-html-mobile-bottom-sheet .native-word-html-toolgroup-text .native-word-icon-btn:nth-of-type(3),
body.tools-page.native-tools-mobile-mode.native-wordhtml-mobile-active .native-word-html-mobile-bottom-sheet .native-word-html-toolgroup-text .native-word-icon-btn:nth-of-type(3) {
    grid-column: 3;
}

html.native-tools-mobile-mode body.tools-page.native-wordhtml-mobile-active .native-word-html-mobile-bottom-sheet .native-word-html-toolgroup-text .native-word-icon-btn:nth-of-type(4),
body.tools-page.native-tools-mobile-mode.native-wordhtml-mobile-active .native-word-html-mobile-bottom-sheet .native-word-html-toolgroup-text .native-word-icon-btn:nth-of-type(4) {
    grid-column: 4;
}

html.native-tools-mobile-mode body.tools-page.native-wordhtml-mobile-active .native-word-html-mobile-bottom-sheet .native-word-html-toolgroup-text .native-word-icon-btn:nth-of-type(5),
body.tools-page.native-tools-mobile-mode.native-wordhtml-mobile-active .native-word-html-mobile-bottom-sheet .native-word-html-toolgroup-text .native-word-icon-btn:nth-of-type(5) {
    grid-column: 5;
}

@media (min-width: 720px) {
    html.native-tools-mobile-mode body.tools-page.native-wordhtml-mobile-active .native-word-html-mobile-bar,
    body.tools-page.native-tools-mobile-mode.native-wordhtml-mobile-active .native-word-html-mobile-bar {
        width: min(calc(100vw - 24px), 520px);
        max-width: min(calc(100vw - 24px), 520px);
    }

    html.native-tools-mobile-mode body.tools-page.native-wordhtml-mobile-active .native-word-html-mobile-dedicated .native-word-html-toolbar.native-word-html-mobile-bottom-sheet,
    body.tools-page.native-tools-mobile-mode.native-wordhtml-mobile-active .native-word-html-mobile-dedicated .native-word-html-toolbar.native-word-html-mobile-bottom-sheet {
        width: min(calc(100vw - 24px), 520px);
        max-width: min(calc(100vw - 24px), 520px);
    }
}

/* =========================================================
   Word -> HTML Mobile - V10 log-safe bar + inactive sheet behind UI
   Ziel: Formatleiste liegt nur aktiv sichtbar über der UI; sonst niemals unter dem Log-Grabber sichtbar.
   ========================================================= */
html.native-tools-mobile-mode body.tools-page.native-wordhtml-mobile-active .native-word-html-mobile-bar,
body.tools-page.native-tools-mobile-mode.native-wordhtml-mobile-active .native-word-html-mobile-bar {
    bottom: calc(var(--tools-mobile-bottom-gap-v10, 10px) + var(--log-height, 0px) + env(safe-area-inset-bottom, 0px));
    z-index: 420520;
}

html.native-tools-mobile-mode body.tools-page.native-wordhtml-mobile-active #native-tools-content[data-current-tool="word-html"],
body.tools-page.native-tools-mobile-mode.native-wordhtml-mobile-active #native-tools-content[data-current-tool="word-html"] {
    padding-bottom: calc(var(--native-tools-mobile-shell-height, 78px) + var(--tools-mobile-bottom-gap-v10, 10px) + var(--log-height, 0px) + env(safe-area-inset-bottom, 0px) + 18px);
}

html.native-tools-mobile-mode:not(.native-wordhtml-mobile-toolbar-open) body.tools-page.native-wordhtml-mobile-active .native-word-html-mobile-dedicated .native-word-html-toolbar.native-word-html-mobile-bottom-sheet,
body.tools-page.native-tools-mobile-mode.native-wordhtml-mobile-active:not(.native-wordhtml-mobile-toolbar-open) .native-word-html-mobile-dedicated .native-word-html-toolbar.native-word-html-mobile-bottom-sheet {
    z-index: 0;
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
    transform: translate3d(-50%, calc(100% + var(--native-tools-mobile-shell-height, 78px) + 96px), 0);
}

html.native-tools-mobile-mode.native-wordhtml-mobile-toolbar-open body.tools-page.native-wordhtml-mobile-active .native-word-html-mobile-dedicated .native-word-html-toolbar.native-word-html-mobile-bottom-sheet,
body.tools-page.native-tools-mobile-mode.native-wordhtml-mobile-toolbar-open.native-wordhtml-mobile-active .native-word-html-mobile-dedicated .native-word-html-toolbar.native-word-html-mobile-bottom-sheet {
    bottom: calc(var(--native-tools-mobile-shell-height, 78px) + var(--tools-mobile-bottom-gap-v10, 10px) + var(--log-height, 0px) + env(safe-area-inset-bottom, 0px) + 8px);
    max-height: calc(100dvh - var(--global-nav-height, 64px) - var(--native-tools-mobile-shell-height, 78px) - var(--tools-mobile-bottom-gap-v10, 10px) - var(--log-height, 0px) - env(safe-area-inset-bottom, 0px) - 32px);
    z-index: 420550;
    opacity: 1;
    visibility: visible;
    pointer-events: auto;
    transform: translate3d(-50%, 0, 0);
}

html.native-tools-mobile-mode body.tools-page.native-wordhtml-mobile-active .native-word-html-mobile-toolbar-backdrop,
body.tools-page.native-tools-mobile-mode.native-wordhtml-mobile-active .native-word-html-mobile-toolbar-backdrop {
    z-index: 1 !important;
    opacity: 0 !important;
    pointer-events: none !important;
}

html.native-tools-mobile-mode.native-wordhtml-mobile-toolbar-open body.tools-page.native-wordhtml-mobile-active .native-word-html-mobile-toolbar-backdrop,
body.tools-page.native-tools-mobile-mode.native-wordhtml-mobile-toolbar-open.native-wordhtml-mobile-active .native-word-html-mobile-toolbar-backdrop {
    z-index: 420540 !important;
    opacity: 1 !important;
    pointer-events: auto !important;
}