.dve-editor-wrapper {
    position: relative;
    border: 1px solid #ddd;
    padding: 10px;
    max-width: 100%;
    box-sizing: border-box;
    font-family: system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
    /* v5.2.27: Einzige Quelle der Wahrheit für Boxen-/Element-Höhen in der Toolbar.
       Alle Höhenregeln im Stylesheet referenzieren ab jetzt nur noch diese Variablen. */
    --dve-row-h: 56px;
    --dve-ctrl-h: 36px;
}

/* v5.2.27: Globales box-sizing für alles innerhalb des Editors. Verhindert die
   Klasse von Bugs, bei der ein Element mit "height:36px" durch eigenes Padding
   (z.B. natives <select>-Rendering in Firefox) real ein paar Pixel höher wird
   als gesetzt -> Scrollbalken/Höhen-Chaos. */
.dve-editor-wrapper,
.dve-editor-wrapper *,
.dve-editor-wrapper *::before,
.dve-editor-wrapper *::after {
    box-sizing: border-box;
}

.dve-noscript-notice {
    background: #C40000;
    color: #ffffff;
    padding: 10px 14px;
    border-radius: 6px;
    font-size: 13px;
    font-weight: 600;
    margin-bottom: 10px;
}

.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;
}

/* LEGACY/DERZEIT UNGENUTZT (deaktiviert 1.2.7): .dve-control--global { */
/*     background-color: #0082C3; */
/*     color: #ffffff; */
/* } */

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

.dve-control--upload-icon {
    background: transparent !important;
    padding: 0 !important;
    min-width: 48px !important;
    width: 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: 26px;
    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;
}

/* LEERE REGEL (entfernt 1.2.7, war ohne Effekt):
   .dve-toolbar-section--topline .dve-control, .dve-toolbar-section--topline .dve-btn { } */

/* LEGACY/DERZEIT UNGENUTZT (deaktiviert 1.2.7): .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; */
/* } */

/* LEGACY/DERZEIT UNGENUTZT (deaktiviert 1.2.7): .dve-text-main-container .dve-control--text { */
/*     flex: 0 1 140px; */
/* } */

/* LEGACY/DERZEIT UNGENUTZT (deaktiviert 1.2.7): .dve-text-main-container .dve-control--text:nth-child(1) { */
/*     flex-basis: 140px; */
/* } */

/* LEGACY/DERZEIT UNGENUTZT (deaktiviert 1.2.7): .dve-text-main-container .dve-control--text:nth-child(2) { */
/*     flex-basis: 100px; */
/* } */

/* LEGACY/DERZEIT UNGENUTZT (deaktiviert 1.2.7): .dve-text-main-container .dve-control--text:nth-child(3) { */
/*     flex-basis: 60px; */
/* } */

/* LEGACY/DERZEIT UNGENUTZT (deaktiviert 1.2.7): .dve-text-main-container .dve-control--text:nth-child(4) { */
/*     flex-basis: 80px; */
/* } */

.dve-text-main-container .dve-control.dve-control--text,
/* LEGACY/DERZEIT UNGENUTZT (deaktiviert 1.2.7): .dve-text-main-container .dve-btn--text { */
/*     min-height: 48px; */
/* } */

/* LEGACY/DERZEIT UNGENUTZT (deaktiviert 1.2.7): .dve-text-main-container .dve-btn--text { */
/*     background-color: #ffffff; */
/*     color: #555555; */
/* } */

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

.dve-btn--image,
/* LEGACY/DERZEIT UNGENUTZT (deaktiviert 1.2.7): .dve-btn--image-main { */
/*     background: #333333; */
/* } */

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

/* LEGACY/DERZEIT UNGENUTZT (deaktiviert 1.2.7): .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-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;
    position: relative;
}

/* NEU: Overlay-Canvas für Uhr-Hilfslinien (immer oberste Ebene, keine Events) */
#dve-guides-canvas {
    position: absolute;
    left: 0;
    top: 0;
    z-index: 9999;
    pointer-events: none;
}

#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;
}

/* LEGACY/DERZEIT UNGENUTZT (deaktiviert 1.2.7): .dve-icon-bold { */
/*     font-weight: 700; */
/* } */

/* LEGACY/DERZEIT UNGENUTZT (deaktiviert 1.2.7): .dve-icon-italic { */
/*     font-style: italic; */
/* } */

/* LEGACY/DERZEIT UNGENUTZT (deaktiviert 1.2.7): .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;
}

/* LEGACY/DERZEIT UNGENUTZT (deaktiviert 1.2.7): .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;
}

/* LEGACY/DERZEIT UNGENUTZT (deaktiviert 1.2.7): #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; */
/* } */

/* LEGACY/DERZEIT UNGENUTZT (deaktiviert 1.2.7): #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); */
/* } */

/* LEGACY/DERZEIT UNGENUTZT (deaktiviert 1.2.7): #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 {
    position: relative;
    display: flex;
    align-items: center;
    gap: 6px;
    padding: 8px 26px 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: 96px;
    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.35);
}

/* Bugfix v5.2.21: Ruhezustand war exakt dieselbe Farbe wie die umgebende grüne Box
   -> Buttons waren nicht als eigene, klickbare Elemente erkennbar. */
.dve-rocker--text .dve-rocker__face{
    background-color: rgba(255,255,255,0.10);
}

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

/* --- Textformat-Rocker: aktiv hell-oliv (Ruhezustand siehe oben) --- */

.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)
   ========================================================= */

/* LEGACY/DERZEIT UNGENUTZT (deaktiviert 1.2.7): .dve-control--toggle { */
/*     position: relative; */
/* } */

/* native Checkbox wirklich ausblenden */
/* LEGACY/DERZEIT UNGENUTZT (deaktiviert 1.2.7): .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) */
/* LEGACY/DERZEIT UNGENUTZT (deaktiviert 1.2.7): .dve-control--toggle { */
/*     background: #0B5A3D; */
/* } */
/* LEGACY/DERZEIT UNGENUTZT (deaktiviert 1.2.7): .dve-control--toggle .dve-btn-icon { */
/*     color: #B7C98A; */
/* } */

/* Aktiv Farben */
/* LEGACY/DERZEIT UNGENUTZT (deaktiviert 1.2.7): .dve-control--toggle:has(input[type="checkbox"]:checked) { */
/*     background: #B7C98A; */
/* } */
/* LEGACY/DERZEIT UNGENUTZT (deaktiviert 1.2.7): .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; }
/* LEGACY/DERZEIT UNGENUTZT (deaktiviert 1.2.7): .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 */
/* LEGACY/DERZEIT UNGENUTZT (deaktiviert 1.2.7): .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{
    gap: 10px;
}
/* Bugfix v5.2.21: war 96px auf JEDEM Element hier drin (Textfeld, Select, Rocker) -
   das hat die grüne Box komplett unnötig aufgebläht. Kompakt auf 36px vereinheitlicht. */
.dve-text-group .dve-control,
.dve-text-group .dve-rocker{
    height: var(--dve-ctrl-h);
    align-items: center;
}
.dve-text-group input[type="text"],
.dve-text-group input[type="number"],
.dve-text-group select{
    height: var(--dve-ctrl-h);
}
.dve-text-group .dve-rocker__face{
    height: var(--dve-ctrl-h);
    min-height: var(--dve-ctrl-h); /* überschreibt die 48px min-height aus der Basis-.dve-rocker__face-Regel */
    padding: 3px 8px;
}

/* --- DVE v1.2.4: 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;
}

/* Bugfix v5.2.24: min-width:600px zwang die Box auf feste Breite, egal wie viel
   Inhalt drin war -> großer Leerraum nach dem letzten Button. Box soll sich am
   Inhalt orientieren, nicht an einer festen Breite. Höhe auf 56px vereinheitlicht,
   damit sie exakt zu den anderen Blöcken (Speicherblock, Icon-Buttons) passt. */
.dve-text-group{
  flex: 0 0 auto;
  flex-shrink: 0;
  height: var(--dve-row-h);
}

/* =============================================
   noki-re v0.4.x – Rahmen (Lösung A) Controls
   ============================================= */

.nokire-frame-controls{
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 4px 6px;
  border-radius: 10px;
  background: rgba(255,255,255,0.12);
  border: 1px solid rgba(255,255,255,0.18);
}

.nokire-frame-ctl{
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 12px;
  line-height: 1;
}

.nokire-frame-ctl__txt{
  font-size: 12px;
  opacity: 0.9;
}

.nokire-frame-controls input[type="range"]{
  width: 90px;
}

.nokire-frame-controls input[type="number"]{
  width: 70px;
}


/* Profil-Umschalter (optional) */
.dve-control--profile-switch {
    flex-direction: row !important; /* war: column (geerbt von .dve-control) -> Dropdown+Button standen übereinander */
    align-items: center;
    flex-wrap: nowrap;
    gap: 8px;
}

.dve-control--profile-switch label {
    display: inline-flex;
    align-items: center;
    min-width: 0; /* erlaubt dem Select, in schmalen Zeilen zu schrumpfen statt zu überlaufen */
}

.dve-control--profile-switch select{
    max-width: 260px;
    padding: 4px 8px;
    border-radius: 8px;
    border: 1px solid #ccc;
    font-size: 13px;
}

/* =========================
   Sticker/Icons Panel
   ========================= */

.nokire-sticker-panel{
    position: absolute;
    z-index: 10050; /* muss über #dve-guides-canvas (9999) liegen, sonst gewinnt bei Gleichstand die DOM-Reihenfolge */
    top: 52px;
    left: 12px;
    width: 360px;
    max-width: calc(100vw - 24px);
    max-height: 520px;
    overflow: auto;
    background: #fff;
    border: 1px solid rgba(0,0,0,0.15);
    border-radius: 10px;
    box-shadow: 0 8px 24px rgba(0,0,0,0.18);
    padding: 10px;
}

.nokire-sticker-panel__header{
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 8px;
}

.nokire-sticker-panel__controls{
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    flex-wrap: wrap;
    margin-bottom: 10px;
}

.nokire-sticker-panel__controls label{
    flex: 1 1 120px;
    min-width: 120px;
}

.nokire-sticker-panel__hint{
    font-size: 12px;
    line-height: 1.35;
    opacity: 0.85;
    margin: 6px 0 10px 0;
}

.nokire-sticker-panel__hint strong{
    font-weight: 600;
}

.nokire-sticker-panel__label{
    display: block;
    font-size: 12px;
    opacity: 0.75;
    margin-bottom: 4px;
}

.nokire-sticker-panel__fav{
    display: flex;
    align-items: center;
    gap: 6px;
    font-size: 13px;
}

.nokire-sticker-grid{
    display: grid;
    /* Responsiv ohne horizontalen Scroll: Spaltenbreite kann schrumpfen */
    grid-template-columns: repeat(auto-fill, minmax(92px, 1fr));
    gap: 8px;
    max-width: 100%;
    overflow-x: hidden;
}

/* Wichtig für CSS-Grid: Items dürfen schrumpfen, sonst bläht Text die Spalten auf */
.nokire-sticker-grid > *{
    min-width: 0;
}

.nokire-sticker-item{
    display: flex; /* statt inline-flex: verhindert min-content Breiten-Effekte */
    flex-direction: column;
    align-items: center;
    justify-content: flex-start;
    border: 1px solid rgba(0,0,0,0.15);
    border-radius: 8px;
    background: #fff;
    padding: 4px;
    cursor: pointer;
    height: auto;
    min-height: 74px;
    width: 100%;
    box-sizing: border-box;
    min-width: 0;
}

.nokire-sticker-item:hover{
    border-color: rgba(0,0,0,0.35);
}

.nokire-sticker-item img{
    width: 100%;
    height: 96px;
    object-fit: contain;
}

.nokire-sticker-caption{
    width: 100%;
    max-width: 100%;
    margin-top: 2px;
    font-size: 11px;
    line-height: 1.1;
    text-align: center;

    /* Umbruch erlaubt: verhindert horizontalen Scroll bei langen Namen */
    white-space: normal;
    overflow-wrap: anywhere;
    word-break: break-word;
    hyphens: auto;

    /* Optisch sauber: maximal 2 Zeilen */
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
    overflow: hidden;

    opacity: 0.9;
}

.nokire-sticker-empty{
    grid-column: 1 / -1;
    padding: 10px;
    opacity: 0.7;
    font-size: 13px;
}

@media (max-width: 520px){
    .nokire-sticker-grid{
        grid-template-columns: repeat(auto-fill, minmax(84px, 1fr));
    }
}



/* ------------------------------------------------------
 * Uhr-Hilfslinien (Guide-Overlay) – nur UI, nicht Export
 * ------------------------------------------------------ */
.nokire-clock-guides-ui{
    /* Integriert wie Sticker-Panel (keine Floating-Overlay-Karte im Canvas) */
    position: absolute;
    z-index: 10050; /* muss über #dve-guides-canvas (9999) liegen, sonst gewinnt bei Gleichstand die DOM-Reihenfolge */
    top: 52px;
    left: 12px;
    width: 360px;
    max-width: calc(100vw - 24px);
    max-height: 520px;
    overflow: auto;
    background: #fff;
    border: 1px solid rgba(0,0,0,0.15);
    border-radius: 10px;
    box-shadow: 0 8px 24px rgba(0,0,0,0.18);
    padding: 10px;
}
.nokire-clock-guides-ui__header{
    display:flex;
    align-items:center;
    justify-content: space-between;
    gap:8px;
    flex-wrap:wrap;
}

.nokire-clock-guides-ui__controls{
    display:flex;
    align-items:center;
    justify-content: space-between;
    gap:10px;
    flex-wrap:wrap;
    margin: 8px 0 10px 0;
}

.nokire-clock-guides-ui__toggle{
    display:flex;
    align-items:center;
    gap:6px;
    font-size: 13px;
}
.nokire-clock-guides-ui__list{
    margin-top:10px;
    display:flex;
    flex-direction:column;
    gap:8px;
}
.nokire-clock-guides-row{
    display:flex;
    align-items:center;
    gap:8px;
    flex-wrap:wrap;
    padding:8px;
    border:1px dashed rgba(0,0,0,0.2);
    border-radius:8px;
    background: rgba(255,255,255,0.5);
}
.nokire-clock-guides-row input[type="text"]{
    width:140px;
}
.nokire-clock-guides-row input[type="range"]{
    width:180px;
}
.nokire-clock-guides-row .nokire-clock-guides-row__pct{
    min-width:42px;
    text-align:right;
    font-variant-numeric: tabular-nums;
}
.nokire-clock-guides-ui__hint{
    margin-top:8px;
    opacity:0.75;
}


/* legacy: class bleibt harmless */
.nokire-clock-guides-ui.is-floating{ }


/* ------------------------------------------------------
   Sticker/Icons – Format-Leiste (BV)
   ------------------------------------------------------ */
.nokire-sticker-item--tile { position: relative; padding-top: 28px; }
.nokire-sticker-item--tile img{
    width: 100%;
    height: 160px;
    object-fit: contain;
    display: block;
}

.nokire-sticker-formats {
    position: absolute;
    top: 2px;
    left: 2px;
    right: 2px;
    display: flex;
    gap: 4px;
    justify-content: center;
    align-items: center;
}
.nokire-sticker-format {
    font-size: 10px;
    line-height: 1;
    padding: 2px 4px;
    border-radius: 4px;
    border: 1px solid rgba(0,0,0,0.25);
    background: rgba(255,255,255,0.85);
    cursor: pointer;
}
.nokire-sticker-format.is-disabled,
.nokire-sticker-format:disabled {
    opacity: 0.35;
    cursor: not-allowed;
}

/* ============================================================
   v5.2.12 – UI-Politur: einheitliche Button-Höhen (Topline)
   + modernes Slider-Design (ersetzt native OS-Schieberegler)
   ============================================================ */

/* --- v5.2.27: Einheitliche Höhe für ALLE Bedienelemente in beiden Toolbar-Zeilen
   (obere Zeile + Verlauf/Ebene/Drehen-Zeile), aus EINER Regel statt zwei getrennten,
   die sich in der Vergangenheit auseinanderentwickelt haben. --- */
.dve-toolbar-section--topline {
    align-items: center; /* NICHT stretch: Profilwechsel-Formular & Overlay-Panels brauchen ihre eigene Höhe */
}

/* Nur die kompakten Buttons/Controls vereinheitlichen – NICHT das Profilwechsel-Formular
   (braucht Platz für Dropdown + Button übereinander) und NICHT die absolut positionierten
   Overlay-Panels (Sticker/Icons, Uhr-Hilfslinien – die haben ihre eigene, größere Höhe). */
.dve-toolbar-section--topline .dve-btn,
.dve-toolbar-section--topline .dve-control,
.dve-toolbar-section--history .dve-btn,
.dve-toolbar-section--history .dve-control,
.dve-toolbar-section--history .dve-rocker,
.dve-toolbar-section--history .dve-rocker__btn,
.dve-toolbar-section--history .dve-rocker__face {
    height: var(--dve-row-h);
    min-height: var(--dve-row-h);
    max-height: var(--dve-row-h);
}

/* Icon+Label-Buttons (z.B. PNG/JPG) wuchsen bisher über den Rahmen hinaus.
   Icon & Label werden hier kompakter, damit alles in dieselbe Höhe passt. */
.dve-toolbar-section--topline .dve-btn .dve-btn-icon {
    font-size: 20px;
    margin-bottom: 1px;
    line-height: 1;
}

.dve-toolbar-section--topline .dve-btn .dve-btn-label {
    font-size: 10px;
    line-height: 1.1;
}

.dve-toolbar-section--topline .nokire-frame-controls {
    height: 56px;
    box-sizing: border-box;
}

/* --- 2) Modernes Slider-Design (ersetzt den nativen weißen Balken) --- */
.dve-editor-wrapper input[type="range"] {
    -webkit-appearance: none;
    appearance: none;
    width: 100%;
    height: 6px;
    border-radius: 999px;
    background: rgba(0, 0, 0, 0.18);
    outline: none;
    cursor: pointer;
    vertical-align: middle;
    box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.15);
}

.dve-editor-wrapper input[type="range"]::-webkit-slider-runnable-track {
    height: 6px;
    border-radius: 999px;
    background: transparent;
}

.dve-editor-wrapper input[type="range"]::-webkit-slider-thumb {
    -webkit-appearance: none;
    appearance: none;
    width: 18px;
    height: 18px;
    margin-top: -6px;
    border-radius: 50%;
    background: #0082C3;
    border: 2px solid #ffffff;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.4);
    cursor: pointer;
    transition: transform 0.12s ease;
}

.dve-editor-wrapper input[type="range"]::-moz-range-track {
    height: 6px;
    border-radius: 999px;
    background: rgba(0, 0, 0, 0.18);
}

.dve-editor-wrapper input[type="range"]::-moz-range-progress {
    height: 6px;
    border-radius: 999px;
    background: #0082C3;
}

.dve-editor-wrapper input[type="range"]::-moz-range-thumb {
    width: 18px;
    height: 18px;
    border-radius: 50%;
    background: #0082C3;
    border: 2px solid #ffffff;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.4);
    cursor: pointer;
}

.dve-editor-wrapper input[type="range"]:hover::-webkit-slider-thumb,
.dve-editor-wrapper input[type="range"]:active::-webkit-slider-thumb {
    transform: scale(1.15);
}

.dve-editor-wrapper input[type="range"]:focus-visible {
    box-shadow: 0 0 0 3px rgba(0, 130, 195, 0.35);
}

/* ============================================================
   v5.2.22 – Info-Tooltips, Speicherblock, Objekt-Rahmen (violett),
   Rocker-Deaktivierung ohne Auswahl, Grundeinstellungen-Popup
   ============================================================ */

/* --- Info-Tooltip-System (wiederverwendbar) --- */
.dve-info-btn {
    position: absolute;
    top: 6px;
    right: 6px;
    width: 16px;
    height: 16px;
    border-radius: 50%;
    background: #d9d9d9;
    color: #333333;
    font-size: 10px;
    font-weight: 700;
    font-style: italic;
    font-family: Georgia, serif;
    border: none;
    box-shadow: 0 0 0 1px rgba(0,0,0,0.15);
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    padding: 0;
    z-index: 5;
}

/* Bugfix v5.2.25: Ein über den Rand ragender Badge (negativer Versatz) wird von
   JEDEM Vorfahren mit overflow-x:auto abgeschnitten (u.a. die ganze Button-Zeile
   .dve-toolbar-section--topline hat das) - betrifft also nicht nur den Textblock.
   Badge bleibt daher grundsätzlich innerhalb der Box; alle Blöcke reservieren
   rechts Platz dafür (siehe padding der jeweiligen Box). */

.dve-info-tooltip {
    position: fixed;
    z-index: 999999; /* Bugfix v5.2.31: muss über dem Freisteller-Modal (99999) liegen, sonst versteckt sich der Tooltip dahinter */
    background: #2c2c2a;
    color: #ffffff;
    font-size: 12px;
    line-height: 1.4;
    padding: 8px 12px;
    border-radius: 8px;
    max-width: 260px;
    box-shadow: 0 4px 14px rgba(0,0,0,0.35);
}

/* --- Speicherblock (rot), analog zum Textblock --- */
.dve-meta-group {
    position: relative;
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 8px 26px 8px 10px;
    background: #8A1414;
    border: 1px solid rgba(255,255,255,0.7);
    border-radius: 12px;
    height: var(--dve-row-h);
    flex-shrink: 0; /* Bugfix v5.2.27: fehlte hier (im Gegensatz zu .dve-text-group) -> Dateiname-Feld schrumpfte bei schmalem Fenster */
}

.dve-meta-group .dve-control,
.dve-meta-group .dve-btn {
    height: var(--dve-ctrl-h);
    min-height: var(--dve-ctrl-h);
    max-height: var(--dve-ctrl-h);
    background: rgba(255,255,255,0.10) !important;
}

.dve-meta-group input[type="text"] {
    height: var(--dve-ctrl-h);
    width: 120px;
    flex-shrink: 0;
    border-radius: 6px;
}

.dve-meta-group .dve-btn-icon {
    font-size: 15px;
    margin-bottom: 0;
}

.dve-meta-group .dve-btn-label {
    font-size: 9px;
}

.dve-meta-group .dve-divider {
    width: 1px;
    height: 28px;
    background: rgba(255,255,255,0.25);
}

/* --- Objekt-Rahmen-Block (violett) --- */
.dve-border-block {
    position: relative;
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 8px 26px 8px 10px;
    background: #5B3A8E;
    border: 1px solid rgba(255,255,255,0.7);
    border-radius: 12px;
    height: var(--dve-row-h);
    flex-shrink: 0;
}

.dve-border-block #dve-border-enable {
    width: 16px;
    height: 16px;
    margin: 0;
}

.dve-border-block label.dve-btn {
    background: transparent !important;
    padding: 0 !important;
    min-height: auto !important;
    height: auto !important;
    flex-direction: row;
    gap: 6px;
    color: #ffffff;
}

#dve-border-tools {
    display: flex;
    align-items: center;
    gap: 8px;
}

#dve-border-tools .dve-btn {
    flex-direction: row;
    align-items: center;
    gap: 6px;
    background: transparent !important;
    padding: 0 !important;
    min-height: auto !important;
    height: 36px; /* Bugfix v5.2.25: war "auto" mit gestapeltem Label -> ~50px, sprengte die 56px-Box */
}

#dve-border-tools .dve-btn-label {
    font-size: 10px;
    color: rgba(255,255,255,0.8);
    margin-bottom: 0;
    white-space: nowrap;
}

#dve-border-tools select,
#dve-border-tools input[type="color"] {
    height: 36px;
    border-radius: 6px;
    box-sizing: border-box;
}

/* --- Neutrale Box für einzelne Buttons ohne Farbzuordnung (Zahnrad, Kamera, Stift, Stern) --- */
.dve-utility-group {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 8px 10px;
    background: rgba(0,0,0,0.12);
    border: 1px solid rgba(255,255,255,0.35);
    border-radius: 12px;
    height: var(--dve-row-h);
    flex-shrink: 0;
}

.dve-utility-group .dve-control,
.dve-utility-group .dve-btn {
    height: var(--dve-ctrl-h);
    min-height: var(--dve-ctrl-h);
    max-height: var(--dve-ctrl-h);
}

/* Bugfix v5.2.26/27: Zeile 2 (.dve-toolbar-section--history: zurück/löschen/vor-hinter/
   drehen/Objekt-Transparenz) hatte nie dieselbe Höhen-Vereinheitlichung wie Zeile 1
   bekommen. Seit v5.2.27 in der EINEN gemeinsamen Regel oben enthalten (inkl. der
   zuvor fehlenden .dve-rocker__btn, was vor/hinter & drehen betrifft). */

.dve-rocker-group {
    position: relative;
    display: inline-flex;
    flex-shrink: 0;
}

.dve-rocker-group .dve-rocker.is-disabled {
    opacity: 0.4;
    filter: grayscale(60%);
    pointer-events: none;
}

.dve-rocker-group .dve-info-btn {
    display: none;
}

.dve-rocker-group.has-selection .dve-info-btn {
    display: flex;
}

/* --- Grundeinstellungen-Popup (wie Sticker/Icons-Panel) --- */
.nokire-basic-settings-panel {
    position: absolute;
    z-index: 10050;
    top: 52px;
    left: 12px;
    width: 340px;
    max-width: calc(100vw - 24px);
    max-height: 520px;
    overflow: auto;
    background: #fff;
    border: 1px solid rgba(0,0,0,0.15);
    border-radius: 10px;
    box-shadow: 0 8px 24px rgba(0,0,0,0.18);
    padding: 14px;
    color: #222222;
}

.nokire-basic-settings-panel__header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 12px;
}

.nokire-basic-settings-panel__label {
    display: block;
    font-size: 12px;
    color: #666666;
    margin-bottom: 4px;
}

.nokire-basic-settings-panel__row {
    margin-bottom: 14px;
}

.nokire-basic-settings-panel__tag {
    display: inline-block;
    font-size: 11px;
    color: #333333;
    background: #eeeeee;
    padding: 3px 8px;
    border-radius: 5px;
    margin-bottom: 8px;
}

.nokire-basic-settings-panel select {
    width: 100%;
    height: 36px;
    border-radius: 6px;
    border: 1px solid #ccc;
    padding: 0 8px;
    font-size: 13px;
    box-sizing: border-box;
}

.nokire-basic-settings-panel .nokire-frame-controls {
    height: auto;
    flex-wrap: wrap;
}

/* Bugfix v5.2.22: Rahmenstärke-Slider durfte trotz width:90px schrumpfen
   (flex-shrink ist standardmäßig 1) -> auf schmalen Bildschirmen blieb nur
   der Punkt (Thumb) sichtbar. flex-shrink:0 verhindert das. */
.nokire-frame-controls input[type="range"]{
  width: 90px;
  flex-shrink: 0;
}