/* PhotoboxDesigner – Styles für das gemeinsame Collage-Designer-Modul (Präfix pbd-) */

.pbd {
    display: grid;
    gap: 14px;
    min-width: 0;
}

/* --- Collagen-Tabs ---------------------------------------------------------- */

.pbd-tabs {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}

.pbd-tab {
    display: inline-flex;
    align-items: stretch;
    border: 1px solid var(--border, #e2e8f0);
    border-radius: 10px;
    background: #fff;
    overflow: hidden;
}

.pbd-tab.is-active {
    border-color: var(--primary, #0066ff);
    box-shadow: 0 0 0 1px var(--primary, #0066ff);
}

.pbd-tab-select {
    min-height: 42px;
    padding: 0 16px;
    border: 0;
    background: none;
    font: inherit;
    font-weight: 800;
    font-size: 14px;
    color: var(--text-secondary, #475569);
    cursor: pointer;
}

.pbd-tab.is-active .pbd-tab-select {
    color: var(--primary, #0066ff);
}

.pbd-tab-remove {
    min-width: 40px;
    border: 0;
    border-left: 1px solid var(--border, #e2e8f0);
    background: none;
    font-size: 18px;
    font-weight: 700;
    color: var(--text-secondary, #64748b);
    cursor: pointer;
}

.pbd-tab-remove:hover {
    color: #b42318;
    background: #fef2f2;
}

.pbd-tab-add {
    min-height: 42px;
    padding: 0 16px;
    border: 1px dashed var(--border, #cbd5e1);
    border-radius: 10px;
    background: #f8fafc;
    font: inherit;
    font-weight: 800;
    font-size: 14px;
    color: var(--text-secondary, #475569);
    cursor: pointer;
}

.pbd-tab-add:hover {
    border-color: var(--primary, #0066ff);
    color: var(--primary, #0066ff);
}

/* --- Toolbar ----------------------------------------------------------------- */

.pbd-toolbar {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    align-items: center;
}

.pbd-tool {
    min-height: 44px;
    padding: 0 14px;
    border: 1px solid var(--border, #e2e8f0);
    border-radius: 10px;
    background: #fff;
    font: inherit;
    font-size: 14px;
    font-weight: 800;
    color: var(--text-primary, #0f172a);
    cursor: pointer;
    transition: border-color 0.15s ease, color 0.15s ease, background 0.15s ease;
}

.pbd-tool:hover:not(:disabled) {
    border-color: var(--primary, #0066ff);
    color: var(--primary, #0066ff);
    background: rgba(0, 102, 255, 0.06);
}

.pbd-tool:focus-visible {
    outline: 2px solid var(--primary, #0066ff);
    outline-offset: 2px;
}

.pbd-tool:disabled {
    opacity: 0.45;
    cursor: default;
}

.pbd-tool-primary {
    border-color: var(--primary, #0066ff);
    color: var(--primary, #0066ff);
}

.pbd-tool-danger {
    color: #b42318;
}

.pbd-tool-danger:hover:not(:disabled) {
    border-color: #b42318;
    color: #b42318;
    background: #fef2f2;
}

.pbd-theme-switch {
    display: inline-flex;
    border-radius: 10px;
}

.pbd-theme-switch .pbd-theme:first-child {
    border-radius: 10px 0 0 10px;
}

.pbd-theme-switch .pbd-theme:last-child {
    border-radius: 0 10px 10px 0;
    margin-left: -1px;
}

.pbd-theme.is-active {
    border-color: var(--primary, #0066ff);
    background: var(--primary, #0066ff);
    color: #fff;
    position: relative;
    z-index: 1;
}

.pbd-theme.is-active:hover:not(:disabled) {
    background: var(--primary, #0066ff);
    color: #fff;
}

/* --- Bühne --------------------------------------------------------------------- */

/* Bühne links, Ebenenliste rechts daneben. Auf schmalen Schirmen rutscht die
   Liste unter die Bühne, sonst bliebe fürs Bild nichts übrig. */
.pbd-arbeit {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-start;
    gap: 14px;
}

.pbd-stage-outer {
    position: relative;
    flex: 1 1 380px;
    min-width: 0;
}

/* --- Ebenen -------------------------------------------------------------------- */

.pbd-ebenen {
    flex: 0 1 216px;
    min-width: 180px;
    padding: 12px;
    border: 1px solid var(--border, #e2e8f0);
    border-radius: 12px;
    background: #fff;
}

.pbd-ebenen-kopf {
    margin: 0 0 8px;
    font-size: 12px;
    font-weight: 800;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: var(--text-secondary, #64748b);
}

.pbd-ebenen-liste {
    display: grid;
    gap: 4px;
    margin: 0;
    padding: 0;
    list-style: none;
}

.pbd-ebene {
    display: flex;
    align-items: stretch;
    gap: 2px;
    border: 1px solid transparent;
    border-radius: 8px;
    background: var(--surface-2, #f8fafc);
}

.pbd-ebene.is-active {
    border-color: var(--primary, #0066ff);
    background: #eff6ff;
}

.pbd-ebene-grund {
    margin-top: 6px;
    border-top: 1px dashed var(--border, #e2e8f0);
    border-radius: 8px;
}

.pbd-ebene-wahl {
    display: flex;
    align-items: center;
    gap: 8px;
    flex: 1 1 auto;
    min-width: 0;
    min-height: 34px;
    padding: 0 8px;
    border: 0;
    border-radius: 8px;
    background: none;
    font: inherit;
    font-size: 13px;
    color: var(--text, #0f172a);
    text-align: left;
    cursor: pointer;
}

.pbd-ebene-icon {
    flex: 0 0 18px;
    font-size: 13px;
    font-weight: 800;
    color: var(--text-secondary, #64748b);
}

.pbd-ebene.is-active .pbd-ebene-icon {
    color: var(--primary, #0066ff);
}

.pbd-ebene-name {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.pbd-ebene-knoepfe {
    display: flex;
    flex-direction: column;
    justify-content: center;
    padding-right: 4px;
}

.pbd-ebene-knoepfe button {
    width: 22px;
    height: 17px;
    padding: 0;
    border: 0;
    background: none;
    font-size: 10px;
    line-height: 1;
    color: var(--text-secondary, #64748b);
    cursor: pointer;
}

.pbd-ebene-knoepfe button:hover:not(:disabled) {
    color: var(--primary, #0066ff);
}

.pbd-ebene-knoepfe button:disabled {
    opacity: 0.28;
    cursor: default;
}

.pbd-ebenen-fuss {
    margin: 10px 0 0;
    font-size: 11px;
    line-height: 1.45;
    color: var(--text-secondary, #64748b);
}

.pbd-ebenen.is-locked {
    opacity: 0.6;
}

/* --- Hilfe --------------------------------------------------------------------- */

.pbd-hilfe {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    min-height: 100%;
    z-index: 65;
    padding: 18px;
    border-radius: 12px;
    background: #fff;
    border: 1px solid var(--border, #e2e8f0);
}

.pbd-hilfe-liste {
    margin: 12px 0 0;
    font-size: 14px;
    line-height: 1.55;
}

.pbd-hilfe-liste dt {
    margin-top: 12px;
    font-weight: 800;
    color: var(--text, #0f172a);
}

.pbd-hilfe-liste dt:first-child {
    margin-top: 0;
}

.pbd-hilfe-liste dd {
    margin: 2px 0 0;
    color: var(--text-secondary, #475569);
}

.pbd-hilfe-masse {
    margin: 4px 0 0;
    padding-left: 18px;
}

.pbd-hilfe-masse li {
    margin-top: 3px;
}

.pbd-hilfe-masse b {
    color: var(--text, #0f172a);
}

.pbd-hilfe-liste em {
    font-style: normal;
    font-weight: 700;
    color: var(--text, #0f172a);
}

.pbd-stage {
    position: relative;
    width: min(100%, 720px);
    margin-inline: auto;
    border: 1px solid var(--border, #e2e8f0);
    border-radius: 12px;
    box-shadow: var(--shadow-sm, 0 2px 8px rgba(15, 23, 42, 0.08));
    background-color: #fff;
    overflow: hidden;
    touch-action: none;
}

/* Hintergrund als eigenes Bild: nur so laesst er sich ziehen und skalieren.
   Er darf ueber den Kartenrand hinausragen, die Buehne schneidet ab. */
.pbd-bg {
    position: absolute;
    display: block;
    max-width: none;
    pointer-events: none;
    user-select: none;
}

/* Rahmenvorlage: liegt ueber den Fotofeldern. Zwei Dinge bleiben absichtlich
   darueber - der Auswahlrahmen des Hintergrunds (sonst unsichtbar) und das
   gerade angefasste Objekt (.pbd-object.is-selected, z-index 5): was man zieht,
   soll man sehen. Alles andere steht unter der Grafik und zeigt damit, wie es
   spaeter gedruckt aussieht. */
.pbd-bg-ueber {
    z-index: 3;
}

.pbd-bg-frame {
    position: absolute;
    z-index: 4;
    border: 2px dashed var(--primary, #0066ff);
    border-radius: 4px;
    pointer-events: none;
    outline: none;
}

.pbd-bg-frame .pbd-handle {
    pointer-events: auto;
}

/* Griffe nach innen, sonst liegen sie beim fuellenden Bild ausserhalb der Karte */
.pbd-bg-frame .pbd-handle-nw { top: -6px; left: -6px; }
.pbd-bg-frame .pbd-handle-ne { top: -6px; right: -6px; }
.pbd-bg-frame .pbd-handle-sw { bottom: -6px; left: -6px; }
.pbd-bg-frame .pbd-handle-se { bottom: -6px; right: -6px; }
.pbd-bg-frame .pbd-handle-n { top: -6px; }
.pbd-bg-frame .pbd-handle-s { bottom: -6px; }
.pbd-bg-frame .pbd-handle-w { left: -6px; }
.pbd-bg-frame .pbd-handle-e { right: -6px; }

/* Kantengriffe als Balken, damit die Achse ohne Ausprobieren zu erkennen ist */
.pbd-bg-frame .pbd-handle-n::before,
.pbd-bg-frame .pbd-handle-s::before {
    width: 26px;
    height: 11px;
    border-radius: 6px;
}

.pbd-bg-frame .pbd-handle-w::before,
.pbd-bg-frame .pbd-handle-e::before {
    width: 11px;
    height: 26px;
    border-radius: 6px;
}

/* Bei freiem Seitenverhaeltnis sind die Griffe eingefaerbt, das Verzerren
   soll man sehen, bevor man zieht */
.pbd-bg-frame.is-frei {
    border-color: #d97706;
}

.pbd-bg-frame.is-frei .pbd-handle::before {
    border-color: #d97706;
}

.pbd-context-bgsperre.is-frei {
    border-color: #d97706;
    color: #b45309;
}

.pbd[data-format="10x15"] .pbd-stage {
    width: min(100%, 400px);
}

.pbd-stage[data-theme="gray"] {
    background-color: #e5e7eb;
}

.pbd-objects {
    position: absolute;
    inset: 0;
}

/* --- Design-Objekte ------------------------------------------------------------- */

.pbd-object {
    position: absolute;
    display: grid;
    place-items: center;
    border: 2px solid transparent;
    border-radius: 6px;
    cursor: grab;
    user-select: none;
    -webkit-user-select: none;
    touch-action: none;
}

.pbd-object:focus-visible {
    outline: 2px solid var(--primary, #0066ff);
    outline-offset: 2px;
}

.pbd-photo {
    background: rgba(255, 255, 255, 0.92);
    border-color: rgba(100, 116, 139, 0.45);
    box-shadow: 0 0 0 3px rgba(255, 255, 255, 0.75);
}

.pbd-photo .pbd-object-label {
    font-size: clamp(11px, 2vw, 15px);
    font-weight: 800;
    color: #64748b;
    pointer-events: none;
}

.pbd-text .pbd-object-label {
    white-space: nowrap;
    line-height: 1.1;
    color: #111827;
    pointer-events: none;
}

.pbd-sticker {
    background: transparent;
}

.pbd-sticker img {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: contain;
    pointer-events: none;
    user-select: none;
    -webkit-user-select: none;
    -webkit-user-drag: none;
}

.pbd-object.is-selected {
    border-color: var(--primary, #0066ff);
    box-shadow: 0 0 0 2px rgba(0, 102, 255, 0.25);
    cursor: grabbing;
    z-index: 5;
}

/* Greifer: 40x40 Touch-Fläche, sichtbarer Punkt in der Mitte */

.pbd-handle {
    position: absolute;
    width: 40px;
    height: 40px;
    display: grid;
    place-items: center;
    touch-action: none;
}

.pbd-handle::before {
    content: "";
    width: 15px;
    height: 15px;
    border-radius: 50%;
    background: #fff;
    border: 2.5px solid var(--primary, #0066ff);
    box-shadow: 0 1px 4px rgba(15, 23, 42, 0.3);
}

.pbd-handle-nw { top: -20px; left: -20px; cursor: nwse-resize; }
.pbd-handle-ne { top: -20px; right: -20px; cursor: nesw-resize; }
.pbd-handle-sw { bottom: -20px; left: -20px; cursor: nesw-resize; }
.pbd-handle-se { bottom: -20px; right: -20px; cursor: nwse-resize; }

/* Kantengriffe gibt es bislang nur am Hintergrund */
.pbd-handle-n { top: -20px; left: 50%; margin-left: -20px; cursor: ns-resize; }
.pbd-handle-s { bottom: -20px; left: 50%; margin-left: -20px; cursor: ns-resize; }
.pbd-handle-w { top: 50%; left: -20px; margin-top: -20px; cursor: ew-resize; }
.pbd-handle-e { top: 50%; right: -20px; margin-top: -20px; cursor: ew-resize; }

.pbd-rotate {
    position: absolute;
    top: -54px;
    left: 50%;
    width: 40px;
    height: 40px;
    margin-left: -20px;
    display: grid;
    place-items: center;
    cursor: grab;
    touch-action: none;
}

.pbd-rotate::before {
    content: "⟳";
    width: 24px;
    height: 24px;
    display: grid;
    place-items: center;
    border-radius: 50%;
    background: #fff;
    border: 2.5px solid var(--primary, #0066ff);
    color: var(--primary, #0066ff);
    font-size: 14px;
    font-weight: 800;
    box-shadow: 0 1px 4px rgba(15, 23, 42, 0.3);
}

.pbd-rotate::after {
    content: "";
    position: absolute;
    top: 32px;
    left: 50%;
    width: 2px;
    height: 14px;
    margin-left: -1px;
    background: var(--primary, #0066ff);
}

/* --- Hilfslinien ------------------------------------------------------------------ */

.pbd-guide {
    position: absolute;
    background: #f43f7c;
    pointer-events: none;
    z-index: 40;
}

.pbd-guide-v {
    top: 0;
    bottom: 0;
    width: 2px;
    margin-left: -1px;
}

.pbd-guide-h {
    left: 0;
    right: 0;
    height: 2px;
    margin-top: -1px;
}

/* Andere Farbe, wenn die Linie an einem Nachbarelement hängt und nicht an
   der Karte. Sonst ist beim Ziehen nicht zu sehen, worauf es einrastet. */
.pbd-guide.is-objekt {
    background: #16a34a;
}

/* --- Vorlagen-Auswahl ------------------------------------------------------------- */

.pbd-templates {
    position: absolute;
    /* Zwei Abschnitte passen selten in die Buehnenhoehe. Die Auswahl deckt die
       Buehne weiterhin ab, darf aber nach unten hinauswachsen, sonst laege der
       Bereich mit den gestalteten Vorlagen unsichtbar unter der Falz. */
    top: 0;
    left: 0;
    right: 0;
    min-height: 100%;
    z-index: 60;
    padding: 18px;
    border-radius: 12px;
    /* Deckend, seit die Auswahl ueber die Buehne hinausragt. Sonst schien der
       Text der Buehne durch die untere Haelfte. */
    background: #fff;
    border: 1px solid var(--border, #e2e8f0);
}

.pbd-templates-head {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 12px;
}

.pbd-templates-head strong {
    font-size: 17px;
    color: var(--text-primary, #0f172a);
}

.pbd-templates-close {
    min-width: 40px;
    min-height: 40px;
    border: 1px solid var(--border, #e2e8f0);
    border-radius: 10px;
    background: #fff;
    font-size: 20px;
    font-weight: 700;
    color: var(--text-secondary, #475569);
    cursor: pointer;
}

.pbd-templates-close:hover {
    border-color: var(--primary, #0066ff);
    color: var(--primary, #0066ff);
}

.pbd-templates-hint {
    margin: 6px 0 14px;
    font-size: 13px;
    color: var(--text-secondary, #64748b);
}

.pbd-templates-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(118px, 1fr));
    gap: 10px;
}

.pbd-template {
    display: grid;
    gap: 8px;
    padding: 10px;
    border: 1px solid var(--border, #e2e8f0);
    border-radius: 10px;
    background: #fff;
    font: inherit;
    cursor: pointer;
    transition: border-color 0.15s ease, box-shadow 0.15s ease;
}

.pbd-template:hover,
.pbd-template:focus-visible {
    border-color: var(--primary, #0066ff);
    box-shadow: 0 4px 14px rgba(0, 102, 255, 0.15);
    outline: none;
}

.pbd-template-preview {
    position: relative;
    display: block;
    width: 100%;
    border: 1px solid #e2e8f0;
    border-radius: 6px;
    background: #fff;
    overflow: hidden;
}

.pbd-mini {
    position: absolute;
    display: block;
}

.pbd-mini-photo {
    background: #dbeafe;
    border: 1px solid #93c5fd;
    border-radius: 2px;
}

.pbd-mini-text {
    background: #94a3b8;
    border-radius: 2px;
}

.pbd-template-name {
    font-size: 12.5px;
    font-weight: 800;
    color: var(--text-primary, #0f172a);
    text-align: center;
    line-height: 1.3;
}

/* --- Gesperrt ----------------------------------------------------------------------- */

.pbd-locked {
    position: absolute;
    inset: 0;
    z-index: 70;
    display: grid;
    place-items: center;
    padding: 20px;
    border-radius: 12px;
    background: rgba(248, 250, 252, 0.82);
    backdrop-filter: blur(1.5px);
}

.pbd-locked p {
    max-width: 380px;
    padding: 14px 18px;
    border: 1px solid var(--border, #e2e8f0);
    border-radius: 10px;
    background: #fff;
    box-shadow: var(--shadow-sm, 0 2px 8px rgba(15, 23, 42, 0.08));
    font-size: 14px;
    font-weight: 700;
    color: var(--text-secondary, #475569);
    text-align: center;
}

.pbd-is-locked .pbd-stage {
    filter: grayscale(0.6);
    opacity: 0.75;
    pointer-events: none;
}

.pbd-is-locked .pbd-toolbar,
.pbd-is-locked .pbd-tabs {
    opacity: 0.55;
}

/* --- Kontext-Panel ------------------------------------------------------------------- */

.pbd-context {
    display: flex;
    flex-wrap: wrap;
    gap: 14px 20px;
    align-items: end;
    padding: 12px 16px;
    border: 1px solid var(--border, #e2e8f0);
    border-radius: 12px;
    background: #f8fafc;
}

.pbd-context[hidden] {
    display: none;
}

.pbd-context-field {
    display: grid;
    gap: 5px;
    min-width: 0;
}

.pbd-context-field span {
    font-size: 12px;
    font-weight: 800;
    letter-spacing: 0.02em;
    text-transform: uppercase;
    color: var(--text-secondary, #64748b);
}

.pbd-context-field input[type="text"] {
    min-height: 42px;
    padding: 0 12px;
    border: 1px solid var(--border, #cbd5e1);
    border-radius: 8px;
    font: inherit;
    font-size: 14px;
    min-width: 200px;
}

.pbd-context-field input[type="text"]:focus-visible {
    outline: 2px solid var(--primary, #0066ff);
    outline-offset: 1px;
}

.pbd-context-field input[type="range"] {
    width: 140px;
    min-height: 42px;
    accent-color: var(--primary, #0066ff);
}

.pbd-context-field select {
    min-height: 42px;
    padding: 0 10px;
    border: 1px solid var(--border, #cbd5e1);
    border-radius: 8px;
    background: #fff;
    font: inherit;
    font-size: 14px;
}

.pbd-context-field select:focus-visible {
    outline: 2px solid var(--primary, #0066ff);
    outline-offset: 1px;
}

.pbd-context-sticker {
    align-self: end;
}

.pbd-context-sticker[hidden] {
    display: none;
}

/* --- Status & Hilfe --------------------------------------------------------------------- */

.pbd-status {
    min-height: 18px;
    font-size: 13px;
    font-weight: 700;
    color: #b42318;
}

.pbd-status:empty {
    min-height: 0;
}

.pbd-help {
    margin: 0;
    font-size: 12.5px;
    color: var(--text-secondary, #64748b);
}

/* --- Mobil ------------------------------------------------------------------------------- */

@media (max-width: 640px) {
    .pbd-toolbar .pbd-tool {
        flex: 1 1 calc(50% - 8px);
        padding: 0 8px;
    }

    .pbd-toolbar .pbd-theme-switch {
        flex: 1 1 calc(50% - 8px);
    }

    .pbd-theme-switch .pbd-theme {
        flex: 1;
    }

    .pbd-context {
        gap: 10px 14px;
    }

    .pbd-context-field {
        flex: 1 1 100%;
    }

    .pbd-context-field input[type="text"],
    .pbd-context-field input[type="range"],
    .pbd-context-field select {
        width: 100%;
        min-width: 0;
    }

    .pbd-templates {
        padding: 12px;
    }

    .pbd-templates-grid {
        grid-template-columns: repeat(auto-fill, minmax(96px, 1fr));
    }

    .pbd-hilfe {
        padding: 12px;
    }

    /* Unter der Bühne nimmt die Ebenenliste die volle Breite */
    .pbd-ebenen {
        flex: 1 1 100%;
    }
}

/* Aktiv-Haken pro Collage: steuert layouts_enabled auf der Box */
.pbd-tab-toggle {
    width: 16px;
    height: 16px;
    margin: 0 2px 0 8px;
    accent-color: var(--primary, #0066ff);
    cursor: pointer;
}

.pbd-tab.is-off .pbd-tab-select {
    opacity: 0.45;
    text-decoration: line-through;
}

/* Umbenennen-Stift am aktiven Collagen-Tab */
.pbd-tab-rename {
    border: 0;
    background: none;
    padding: 2px 4px;
    font-size: 13px;
    cursor: pointer;
    opacity: 0.6;
}

.pbd-tab-rename:hover {
    opacity: 1;
}

/* Zweiter Bereich in der Vorlagenauswahl: fertig gestaltete Hintergruende.
   Die leeren Layouts bleiben oben unveraendert. */

.pbd-templates-section {
    margin: 16px 0 8px;
    font-size: 12px;
    font-weight: 700;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: var(--text-secondary, #64748b);
}

.pbd-templates-hint + .pbd-templates-section {
    margin-top: 0;
}

.pbd-designs {
    margin-top: 20px;
    padding-top: 16px;
    border-top: 1px solid var(--border, #e2e8f0);
}

.pbd-designs-hint {
    margin: 0 0 12px;
    font-size: 13px;
    color: var(--text-secondary, #64748b);
}

.pbd-designs-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(118px, 1fr));
    gap: 10px;
}

.pbd-designs-leer {
    grid-column: 1 / -1;
    margin: 0;
    padding: 14px 16px;
    border: 1px dashed var(--border, #e2e8f0);
    border-radius: 10px;
    font-size: 13px;
    color: var(--text-secondary, #64748b);
}

/* Die Vorschau zeigt den echten Hintergrund, die Fotofelder liegen darueber. */
.pbd-design-preview {
    background-size: cover;
    background-position: center;
}

.pbd-design-preview .pbd-mini-photo {
    background: rgba(255, 255, 255, 0.62);
    border-color: rgba(255, 255, 255, 0.85);
}

.pbd-design-anlass {
    font-size: 11px;
    letter-spacing: 0.03em;
    text-transform: uppercase;
    color: var(--text-secondary, #94a3b8);
}

/* Farbwähler: Hintergrund in der Werkzeugleiste, Textfarbe im Kontextpanel */

.pbd-farbwahl {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    cursor: pointer;
}

.pbd-farbwahl input[type="color"],
.pbd-context-farbe input[type="color"] {
    width: 30px;
    height: 26px;
    padding: 0;
    border: 1px solid rgba(15, 23, 42, .22);
    border-radius: 6px;
    background: none;
    cursor: pointer;
}

.pbd-farbwahl input[type="color"]::-webkit-color-swatch-wrapper { padding: 2px; }
.pbd-farbwahl input[type="color"]::-webkit-color-swatch { border: 0; border-radius: 4px; }

.pbd-farbzeile {
    display: flex;
    align-items: center;
    gap: 8px;
    flex-wrap: wrap;
}

.pbd-tupfer {
    display: inline-flex;
    gap: 4px;
    flex-wrap: wrap;
}

.pbd-tupfer button {
    width: 20px;
    height: 20px;
    padding: 0;
    border: 1px solid rgba(15, 23, 42, .25);
    border-radius: 4px;
    cursor: pointer;
}

.pbd-tupfer button:hover { transform: scale(1.12); }

/* Löschknopf an der Markierung */

.pbd-loeschen {
    position: absolute;
    top: -13px;
    right: -13px;
    width: 26px;
    height: 26px;
    padding: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    border: 2px solid #fff;
    border-radius: 50%;
    background: #d62c2c;
    color: #fff;
    font: 700 17px/1 Arial, sans-serif;
    cursor: pointer;
    box-shadow: 0 1px 4px rgba(0, 0, 0, .35);
    z-index: 5;
}

.pbd-loeschen:hover { background: #b01f1f; }
.pbd-loeschen:focus-visible { outline: 2px solid #0f7b9c; outline-offset: 2px; }

/* Bei gedrehtem Element mitdrehen ist unnötig – der Knopf bleibt am Eck */