.dve-editor-wrapper {
    border: 1px solid #ddd;
    padding: 10px;
    max-width: 100%;
    box-sizing: border-box;
    font-family: system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
}

.dve-toolbar {
    display: flex;
    flex-direction: column;
    gap: 14px;
    margin-bottom: 10px;
    background-color: #787878;
    padding: 8px;
    box-sizing: border-box;
    border-radius: 6px;
}

.dve-toolbar-section {
    display: flex;
    flex-wrap: wrap;
    gap: 14px;
    row-gap: 14px;
    align-items: stretch;
}

.dve-toolbar-section--topline {
    display: flex;
    flex-wrap: nowrap;
    gap: 8px;
    align-items:  center;
    width: 100%;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
}

.dve-control {
    background-color: #777777;
    border-radius: 8px;
    padding: 6px 8px;
    display: inline-flex;
    flex-direction: column;
    justify-content: center;
    gap: 3px;
    box-sizing: border-box;
    color: #ffffff;
    min-height: 48px;
}

.dve-control--text {
    min-width: 70px;
    background-color: #005C3B;
	color: #ffffff;
}

.dve-control--global {
    background-color: #0082C3;
    color: #ffffff;
}

.dve-control--bgcolor {
    background-color: #0082C3;
    color: #ffffff;
}

.dve-control--upload {
    background-color: #FF4D00;
    color: #ffffff;
}

.dve-control--upload .dve-btn-icon {
    font-size: 33px !important;
    width: 33px;
    height: 33px;
    line-height: 33px;
}

.dve-control--upload-icon {
    background: transparent !important;
    padding: 0 !important;
    min-width: 48px !important;
    width: 48px !important;
    height: 48px !important;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 10px;
}

.dve-control--upload-icon:hover {
    background: rgba(255,255,255,0.15);
}

.dve-control--upload-icon .dve-btn-icon {
    font-size: 46px;
    color: #ffffff;
    margin: 0;
}

.dve-control input[type="text"],
.dve-control input[type="number"],
.dve-control input[type="color"],
.dve-control select {
    width: 100%;
    box-sizing: border-box;
    border: none;
    padding: 4px 6px;
    font-size: 12px;
    background: #ffffff;
    color: #000000;
}

.dve-btn {
    border: none;
    border-radius: 8px;
    padding: 6px 10px;
    cursor: pointer;
    display: inline-flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    min-width: 50px;
    min-height: 48px;
    text-align: center;
    font-size: 12px;
    line-height: 1.2;
    color: #ffffff;
    box-sizing: border-box;
}

.dve-btn .dve-btn-icon {
    font-size: 26px;
    margin-bottom: 2px;
}

.dve-toolbar-section--topline .dve-control,
.dve-toolbar-section--topline .dve-btn {

}

.dve-text-main-container {
    display: flex;
    flex-wrap: nowrap;
    align-items: stretch;
    gap: 8px;
    flex: 1 1 auto;
    min-width: 0;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
}

.dve-text-main-container .dve-control--text {
    flex: 0 1 140px;
}

.dve-text-main-container .dve-control--text:nth-child(1) {
    flex-basis: 140px;
}

.dve-text-main-container .dve-control--text:nth-child(2) {
    flex-basis: 100px;
}

.dve-text-main-container .dve-control--text:nth-child(3) {
    flex-basis: 60px;
}

.dve-text-main-container .dve-control--text:nth-child(4) {
    flex-basis: 80px;
}

.dve-text-main-container .dve-control.dve-control--text,
.dve-text-main-container .dve-btn--text {
    min-height: 48px;
}

.dve-text-main-container .dve-btn--text {
    background-color: #ffffff;
    color: #555555;
}

.dve-btn--history {
    background: #0082C3;
}

.dve-btn--image,
.dve-btn--image-main {
    background: #333333;
}

.dve-btn--meta {
    background: #C40000;
}

.dve-btn--bg {
    background: #005C3B;
}

.dve-toolbar-section--text .dve-btn,
.dve-btn--text {
    background-color: #005C3B;
    color: #ffffff;
}

.dve-control--image {
    background: #0082C3;
}

.dve-border-block {
    display: inline-flex;
    gap: 8px;
    align-items: center;
}

.dve-control--meta {
    max-width: 100px;
}

.dve-canvas-container {
    margin-top: 10px;
}

.dve-save-status {
    margin-left: 8px;
    font-size: 12px;
    color: #ffffff;
}

#dve-canvas-wrapper {
    overflow: hidden;
}

#dve-canvas {
    max-width: 100%;
    display: block;
    margin: 0 auto;
}

.dve-empty .dve-toolbar-section:not(.dve-toolbar-section--topline) {
    display: none;
}

.dve-control--image,
.dve-control--image-toggle {
    background-color: #FF4D00;
    color: #ffffff;
}

.dve-toolbar-section--history .dve-object-tool {

    background-color: #555555;
    color: #ffffff;
}

.dve-mode-image .dve-toolbar-section--history .dve-object-tool {
    background-color: #FF4D00;
}

.dve-mode-text .dve-toolbar-section--history .dve-object-tool {
    background-color: #005C3B;
}

.dve-mode-shape .dve-toolbar-section--history .dve-object-tool {
    background-color: #800080;
}

.dve-btn-icon {
    font-size: 22px;
    display: block;
    text-align: center;
    line-height: 1;
    color: #ffffff;
}

.dve-icon-bold {
    font-weight: 700;
}

.dve-icon-italic {
    font-style: italic;
}

.dve-icon-strike {
    text-decoration: line-through;
}

.dve-color-icon {
    width: 22px;
    height: 22px;
    border-radius: 4px;
    display: block;
    margin: 0 auto;
}

.dve-icon-sepia {
    background: #704214;
}

.dve-icon-bw {
    background: linear-gradient(90deg, black 50%, white 50%);
    border: 1px solid #333;
}

.dve-control--toggle {
    width: 45px !important;
    min-width: 45px !important;
    height: 45px !important;
    padding: 0 !important;
    justify-content: center !important;
    align-items: center !important;
}

#dve-add-text.dve-btn--text {
    background-color: #ffffff !important;
    color: #333333 !important;
}

#dve-add-text .dve-btn-icon {
    color: #333333 !important;
    font-size: 26px !important;
}

.dve-editor-wrapper{
    --dve-bg-preview: #000000;
    --dve-text-preview: #C40000;
}

#dve-bg-color-icon.dve-icon-bg-color{
    width: 22px;
    height: 22px;
    border-radius: 4px;
    background: var(--dve-bg-preview);
    border: 2px solid rgba(255,255,255,0.85);
    display: block;
    margin: 0 auto;
}

#dve-text-color-icon.dve-icon-text-color{
    font-weight: 800;
    font-size: 20px;
    line-height: 1;
    color: var(--dve-text-preview);
    position: relative;
    display: inline-block;

    text-shadow:
        0 0 2px rgba(0,0,0,0.85),
        0 0 2px rgba(255,255,255,0.65);
}

#dve-text-color-icon.dve-icon-text-color::after{
    content: "";
    position: absolute;
    left: 0;
    bottom: -6px;
    width: 100%;
    height: 4px;
    background: var(--dve-text-preview);
    border-radius: 2px;
}


/* 1) Basis-Style für Color Inputs */
#dve-bg-color,
#dve-text-color,
#dve-text-stroke-color {
    -webkit-appearance: none;
    appearance: none;
    width: 44px;
    height: 28px;
    padding: 0;
    border: 1px solid rgba(255,255,255,0.35);
    border-radius: 6px;
    background: transparent;
    overflow: hidden;
    cursor: pointer;
}

/* 2) WebKit Swatch Wrapper */
#dve-bg-color::-webkit-color-swatch-wrapper,
#dve-text-color::-webkit-color-swatch-wrapper,
#dve-text-stroke-color::-webkit-color-swatch-wrapper {
    padding: 0;
}

/* 3) WebKit Swatch */
#dve-bg-color::-webkit-color-swatch,
#dve-text-color::-webkit-color-swatch,
#dve-text-stroke-color::-webkit-color-swatch {
    border: 0;
    border-radius: 5px;
}

/* 4) Firefox Swatch */
#dve-bg-color::-moz-color-swatch,
#dve-text-color::-moz-color-swatch,
#dve-text-stroke-color::-moz-color-swatch {
    border: 0;
    border-radius: 5px;
}




.dve-text-group {
    display: flex;
    align-items: center;
    gap: 6px;
    padding: 8px 10px;
    background: #005C3B;
    border: 1px solid rgba(255,255,255,0.7);
    border-radius: 12px;
    box-sizing: border-box;
    min-width: 0;
}


.dve-text-group .dve-control {
    background: transparent !important;
    padding: 0 !important;
    min-height: auto !important;
    border-radius: 0 !important;
}

.dve-text-group .dve-btn-label {
    color: #ffffff;
    font-size: 12px;
    margin-bottom: 4px;
}

.dve-text-group input[type="text"],
.dve-text-group select {
    height: 32px;
    border-radius: 6px;
}

.dve-text-group #dve-text-color {
    width: 44px;
    height: 28px;
}

.dve-text-group #dve-add-text {
    background: #ffffff !important;
    color: #333333 !important;
    min-width: 48px;
    height: 48px;
    border-radius: 10px;
}

.dve-text-group #dve-add-text .dve-btn-icon {
    color: #333333 !important;
    font-size: 26px;
    margin: 0;
}

#dve-bg-color,
#dve-text-color {
    -webkit-appearance: none;
    appearance: none;
    width: 44px;
    height: 28px;
    padding: 0;
    border: 1px solid rgba(255,255,255,0.7);
    border-radius: 6px;
    background: transparent;
    overflow: hidden;
}


@media (max-width: 480px) {

    .dve-text-group {
        padding: 6px 8px;
        gap: 6px;
        border-radius: 10px;
    }

    .dve-text-group input[type="text"] {
        width: 120px;
        min-width: 120px;
        font-size: 14px;
    }

    .dve-text-group select {
        width: 110px;
        min-width: 110px;
        font-size: 14px;
        padding-right: 20px;
    }

    .dve-text-group #dve-text-color {
        width: 40px;
        height: 26px;
    }


    .dve-text-group #dve-add-text .dve-btn-icon {
        font-size: 22px;
    }
}

@media (max-width: 768px) {
    .dve-toolbar {
        padding: 6px;
        gap: 8px;
    }
}


/* ======================================================================
   UI-STATE: hidden (saubere Steuerung über HTML [hidden] + JS)
   ====================================================================== */
[hidden]{ display:none !important; }








/* ======================================================================
   ROCKER / SEGMENTED CONTROLS (z.B. Textformat Bold/Italic/Strike)
   ====================================================================== */
.dve-rocker{
    display: inline-flex;
    align-items: stretch;
    border-radius: 10px;
    overflow: hidden;
    box-shadow: inset 0 0 0 1px rgba(255,255,255,0.18);
}

.dve-rocker__seg{
    position: relative;
    display: inline-flex;
    margin: 0;
    padding: 0;
    cursor: pointer;
    user-select: none;
}

.dve-rocker__check{
    position: absolute;
    opacity: 0;
    pointer-events: none;
    width: 1px;
    height: 1px;
}

.dve-rocker__face{
    display: inline-flex;
    align-items: center;
    justify-content: center;

    /* an bestehende Toolbar-Buttons anlehnen */
    min-height: 48px;
    min-width: 30px;
    padding: 3px 3px;

    border-radius: 0;
}

.dve-rocker__seg:not(:last-child) .dve-rocker__face{
    box-shadow: inset -1px 0 0 rgba(255,255,255,0.14);
}

.dve-rocker__seg:focus-within .dve-rocker__face{
    outline: 2px solid rgba(255,255,255,0.55);
    outline-offset: -2px;
}

/* --- Textformat-Rocker: inaktiv dunkelgrün, aktiv hell-oliv --- */
.dve-rocker--text .dve-rocker__face{
    background-color: #005C3B; /* entspricht .dve-control--text */
}

.dve-rocker--text .dve-rocker__txt{
    color: #B7C98A; /* inaktiv: Schrift hell-oliv */
    font-weight: 700;
    letter-spacing: 0.5px;
}

.dve-rocker--text .dve-rocker__check:checked + .dve-rocker__face{
    background-color: #B7C98A; /* aktiv: hell-oliv */
}

.dve-rocker--text .dve-rocker__check:checked + .dve-rocker__face .dve-rocker__txt{
    color: #0B5A3D; /* aktiv: Schrift dunkelgrün */
}

/* Format-Varianten */
.dve-rocker__txt--bold{ font-weight: 900; }
.dve-rocker__txt--italic{ font-style: italic; }
.dve-rocker__txt--strike{
    text-decoration: line-through;
    text-decoration-thickness: 2px;
}


/* =========================================================
   Rocker-Buttons: im Rocker keinen "unsichtbaren Rand" trennen lassen
   (sonst entstehen Spalten zwischen den Segmenten)
   ========================================================= */
.dve-rocker .dve-rocker__btn.dve-btn{
  border: 0;                 /* neutralisiert .dve-btn { border:4px transparent } im Rocker */
  background-clip: padding-box;
}

/* Segment-Rundungen: nur außen rund */
.dve-rocker .dve-rocker__btn--left{
  border-top-left-radius: 10px;
  border-bottom-left-radius: 10px;
}
.dve-rocker .dve-rocker__btn--right{
  border-top-right-radius: 10px;
  border-bottom-right-radius: 10px;
}

/* Optische Trennlinie zwischen links/rechts (falls du sie deutlicher willst) */
.dve-rocker .dve-rocker__btn--left{
  box-shadow: inset -1px 0 0 rgba(255,255,255,0.14);
}





/* =========================================================
   Text-Checkboxen (Fett/Kursiv/Durchgestrichen)
   - native Checkbox unsichtbar (kein weißes Kästchen)
   - Farben wie vereinbart:
       inaktiv: BG #0B5A3D, Schrift #B7C98A
       aktiv:   BG #B7C98A, Schrift #0B5A3D
   - TXT-Format pro Button
   (Nur CSS – kein Layout-/Box-Refactor)
   ========================================================= */

.dve-control--toggle{  
    position: relative;
}

/* native Checkbox wirklich ausblenden */
.dve-control--toggle input[type="checkbox"]{
    position: absolute;
    opacity: 0;
    pointer-events: none;
    width: 1px;
    height: 1px;
    margin: 0;
    padding: 0;
    border: 0;
}

/* Default Farben (inaktiv) */
.dve-control--toggle{
    background: #0B5A3D;
}
.dve-control--toggle .dve-btn-icon{
    color: #B7C98A;
}

/* Aktiv Farben */
.dve-control--toggle:has(input[type="checkbox"]:checked){
    background: #B7C98A;
}
.dve-control--toggle:has(input[type="checkbox"]:checked) .dve-btn-icon{
    color: #0B5A3D;
}

/* TXT-Format */
.dve-icon-bold{ font-weight: 900; }
.dve-icon-italic{ font-style: italic; }
.dve-icon-strike{
    text-decoration: line-through;
    text-decoration-thickness: 2px;
}

/* === DVE UNSICHTBARER SICHERHEITSRAND (STABIL) ===
   Ziel: 8px "unsichtbarer Rahmen" = echter Abstand (Layout), bei voller Rundung.
   Umsetzung: transparenter Border + expliziter Radius + background-clip.
*/
.dve-btn {
  box-sizing: border-box;
  border: 4px solid transparent;
  box-shadow: 0 0 0 8px transparent;
  border-radius: 12px;
  background-clip: padding-box;
}

/* Dateiname-Box ist ein Label-Control, kein Button */
label.dve-control.dve-control--meta {
  box-sizing: border-box;
  border: 4px solid transparent;
  box-shadow: 0 0 0 8px transparent;
  border-radius: 12px;
  background-clip: padding-box;
}


/* Rocker (zweiteilig, beide Seiten klickbar, wiederholbar) */
.dve-rocker{
  display:inline-flex;
  align-items:stretch;
  border-radius: 10px;
  overflow:hidden;
  background: rgba(255,255,255,0.12);
  box-shadow: inset 0 0 0 1px rgba(255,255,255,0.18);
}

.dve-rocker__btn{
  border-radius: 0;             /* wichtig: zusammenhängend */
  min-width: 30px;
  min-height: 48px;
  padding: 6px 10px;
}

.dve-rocker__btn--left{
  box-shadow: inset -1px 0 0 rgba(255,255,255,0.14);
}

.dve-rocker__btn:focus-visible{
  outline: 2px solid rgba(255,255,255,0.45);
  outline-offset: -2px;
}

/* Optional: last pressed highlight */
.dve-rocker__btn.is-last{
  background: rgba(255,255,255,0.18);
}



/* v1.2.1: Text-Tools in einer Zeile (nur Text-Selektion steuert Sichtbarkeit via JS) */
.dve-text-group{
    flex-wrap: nowrap;
    overflow-x: auto;
    gap: 10px;
}
.dve-text-group .dve-control,
.dve-text-group .dve-rocker{
    height: 48px;
    align-items: center;
}
.dve-text-group input[type="text"],
.dve-text-group input[type="number"],
.dve-text-group select{
    height: 48px;
}
.dve-text-group .dve-rocker__face{
    height: 48px;
}

/* --- DVE v1.3: Toolbar min-width + horizontal scroll (Option A + D) --- */
.dve-toolbar{
  overflow-x: auto;
  overflow-y: hidden;
  -webkit-overflow-scrolling: touch;
  flex-wrap: nowrap;
}

/* Ensure toolbar content can exceed viewport without crushing controls */
.dve-toolbar > *{
  flex: 0 0 auto;
}

/* Green text block: keep stable width and prevent shrink */
.dve-text-group{
  flex: 0 0 auto;
  flex-shrink: 0;
  min-width: 600px;
  white-space: nowrap;
}

/* --- DVE v1.3: Versionsanzeige im Frontend --- */
.dve-version{
  font-size: 12px;
  line-height: 1.2;
  opacity: 0.75;
  margin-top: 8px;
  text-align: right;
}