.cdp-root {
    --cdp-brand: #1a2a3a;
    --cdp-accent: #e84c1e;
    --cdp-text: #1a2a3a;
    --cdp-bg: #ffffff;
    --cdp-zindex: 999999;
    position: fixed;
    inset: 0;
    z-index: var(--cdp-zindex, 999999);
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
    -webkit-font-smoothing: antialiased;
    font-size: 14px;
}

.cdp-root[hidden] {
    display: none !important;
}

.cdp-overlay {
    position: absolute;
    inset: 0;
    background: rgba(10, 15, 20, 0.4);
    opacity: 0;
    transition: opacity 0.25s ease;
    pointer-events: none;
}

/* ---------- Bar-Variante ---------- */
.cdp-design-bar .cdp-overlay {
    display: none;
}

.cdp-design-bar .cdp-panel {
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    max-width: none;
    width: 100%;
    margin: 0;
    border-radius: 0;
    box-shadow: 0 -2px 16px rgba(0, 0, 0, 0.14);
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 14px;
    padding: 12px 20px;
}

.cdp-design-bar.cdp-pos-top .cdp-panel {
    top: 0;
    bottom: auto;
    box-shadow: 0 2px 16px rgba(0, 0, 0, 0.14);
}

.cdp-design-bar .cdp-panel-main {
    flex: 1 1 380px;
}

.cdp-design-bar .cdp-desc {
    max-width: 900px;
}

.cdp-design-bar .cdp-actions {
    flex: 0 0 auto;
    flex-direction: row;
    align-items: center;
    gap: 8px;
}

.cdp-design-bar .cdp-actions-main {
    flex-direction: row;
}

.cdp-design-bar .cdp-categories {
    margin-top: 10px;
}

/* ---------- Modal-Variante ---------- */
.cdp-design-modal .cdp-overlay {
    opacity: 1;
    pointer-events: auto;
}

.cdp-design-modal .cdp-panel {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: min(420px, calc(100% - 24px));
    max-height: calc(100% - 40px);
    overflow-y: auto;
    border-radius: 10px;
    box-shadow: 0 16px 44px rgba(0, 0, 0, 0.26);
    padding: 20px 20px 16px;
}

.cdp-design-modal .cdp-categories {
    margin-top: 12px;
}

.cdp-design-modal .cdp-actions {
    flex-direction: column;
    align-items: stretch;
    margin-top: 14px;
}

.cdp-design-modal .cdp-actions-main {
    display: flex;
    gap: 8px;
    flex-direction: column-reverse;
}

.cdp-design-modal .cdp-btn-link {
    align-self: flex-start;
    margin-bottom: 4px;
}

/* ---------- Gemeinsame Elemente ---------- */
.cdp-panel {
    background: var(--cdp-bg);
    color: var(--cdp-text);
}

.cdp-title {
    margin: 0 0 5px;
    font-size: 1em;
    font-weight: 700;
    color: var(--cdp-brand);
}

.cdp-desc {
    margin: 0;
    font-size: 0.85em;
    line-height: 1.45;
    opacity: 0.85;
}

.cdp-links {
    margin: 6px 0 0;
    font-size: 0.78em;
}

.cdp-links a {
    color: var(--cdp-accent);
    text-decoration: underline;
    margin-right: 12px;
}

.cdp-categories[hidden] {
    display: none;
}

.cdp-category {
    padding: 8px 0;
    border-top: 1px solid rgba(26, 42, 58, 0.09);
}

.cdp-category:first-child {
    border-top: 1px solid rgba(26, 42, 58, 0.09);
    margin-top: 6px;
}

.cdp-category-head {
    display: flex;
    align-items: center;
    gap: 8px;
}

.cdp-category-label {
    font-weight: 600;
    font-size: 0.85em;
}

.cdp-category-desc {
    margin: 4px 0 0 46px;
    font-size: 0.76em;
    opacity: 0.75;
    line-height: 1.4;
}

.cdp-switch {
    position: relative;
    display: inline-block;
    width: 34px;
    height: 19px;
    flex-shrink: 0;
}

.cdp-switch input {
    opacity: 0;
    width: 0;
    height: 0;
}

.cdp-switch-slider {
    position: absolute;
    inset: 0;
    background: #c9d1d8;
    border-radius: 19px;
    transition: background 0.2s ease;
    cursor: pointer;
}

.cdp-switch-slider::before {
    content: "";
    position: absolute;
    height: 14px;
    width: 14px;
    left: 2.5px;
    top: 2.5px;
    background: #fff;
    border-radius: 50%;
    transition: transform 0.2s ease;
    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.3);
}

.cdp-switch input:checked + .cdp-switch-slider {
    background: var(--cdp-accent);
}

.cdp-switch input:checked + .cdp-switch-slider::before {
    transform: translateX(15px);
}

.cdp-switch input:disabled + .cdp-switch-slider {
    background: var(--cdp-brand);
    opacity: 0.5;
    cursor: not-allowed;
}

.cdp-actions {
    display: flex;
}

.cdp-actions-main {
    display: flex;
    gap: 8px;
}

.cdp-btn {
    font-size: 0.8em;
    font-weight: 600;
    padding: 7px 14px;
    border-radius: 6px;
    border: 1.5px solid transparent;
    cursor: pointer;
    white-space: nowrap;
    transition: opacity 0.15s ease, transform 0.1s ease;
    line-height: 1.3;
}

.cdp-btn:hover {
    opacity: 0.88;
}

.cdp-btn:active {
    transform: scale(0.98);
}

.cdp-btn-primary {
    background: var(--cdp-accent);
    color: #fff;
}

.cdp-btn-outline {
    background: transparent;
    border-color: var(--cdp-brand);
    color: var(--cdp-brand);
}

.cdp-btn-link {
    background: transparent;
    border: none;
    padding: 6px 2px;
    color: var(--cdp-brand);
    text-decoration: underline;
    font-size: 0.78em;
}

/* Reopen-Link (Shortcode) – jetzt ein echter, kompakter Button statt Textlink */
.cdp-reopen-link {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    background: transparent;
    border: 1.5px solid var(--cdp-brand, #1a2a3a);
    color: var(--cdp-brand, #1a2a3a);
    padding: 6px 12px;
    border-radius: 6px;
    font: inherit;
    font-size: 0.8em;
    font-weight: 600;
    text-decoration: none;
    cursor: pointer;
    transition: background 0.15s ease, color 0.15s ease;
}

.cdp-reopen-link:hover {
    background: var(--cdp-brand, #1a2a3a);
    color: #fff;
}

.cdp-reopen-link::before {
    content: "";
    width: 13px;
    height: 13px;
    flex-shrink: 0;
    background-color: currentColor;
    -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M21.5 12.5c-.4 0-.8-.1-1.1-.3-.6-.3-1-.9-1.1-1.6-.1-.5-.5-.9-1-.9h-.2c-1.1 0-2-.9-2-2 0-.4.1-.8.3-1.1.2-.4.2-.9-.1-1.3-.6-.8-1.5-1.3-2.5-1.3C8.9 4 5 7.9 5 12.7S8.9 21 13.8 21c4.5 0 8.2-3.3 8.9-7.7.1-.4-.2-.8-.6-.8h-.6zM8.5 10a1 1 0 110-2 1 1 0 010 2zm2.5 5.5a1.2 1.2 0 110-2.4 1.2 1.2 0 010 2.4zM15 10.5a1 1 0 110-2 1 1 0 010 2z'/%3E%3C/svg%3E") no-repeat center / contain;
    mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M21.5 12.5c-.4 0-.8-.1-1.1-.3-.6-.3-1-.9-1.1-1.6-.1-.5-.5-.9-1-.9h-.2c-1.1 0-2-.9-2-2 0-.4.1-.8.3-1.1.2-.4.2-.9-.1-1.3-.6-.8-1.5-1.3-2.5-1.3C8.9 4 5 7.9 5 12.7S8.9 21 13.8 21c4.5 0 8.2-3.3 8.9-7.7.1-.4-.2-.8-.6-.8h-.6zM8.5 10a1 1 0 110-2 1 1 0 010 2zm2.5 5.5a1.2 1.2 0 110-2.4 1.2 1.2 0 010 2.4zM15 10.5a1 1 0 110-2 1 1 0 010 2z'/%3E%3C/svg%3E") no-repeat center / contain;
}

/* ---------- Schwebender Mini-Button (immer sichtbar, kein Shortcode nötig) ---------- */
.cdp-fab {
    position: fixed;
    bottom: var(--cdp-fab-offset, 16px);
    z-index: calc(var(--cdp-zindex, 999999) - 1);
    border-radius: 50%;
    background: #1a2a3a;
    border: none;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.22);
    opacity: 0.85;
    transition: opacity 0.15s ease, transform 0.15s ease;
    padding: 0;
}

.cdp-fab-size-small {
    width: 34px;
    height: 34px;
}

.cdp-fab-size-medium {
    width: 44px;
    height: 44px;
}

.cdp-fab-size-large {
    width: 56px;
    height: 56px;
}

.cdp-fab:hover {
    opacity: 1;
    transform: scale(1.06);
}

.cdp-fab[hidden] {
    display: none !important;
}

.cdp-fab-pos-left {
    left: var(--cdp-fab-offset, 16px);
}

.cdp-fab-pos-right {
    right: var(--cdp-fab-offset, 16px);
}

.cdp-fab svg {
    fill: #fff;
}

.cdp-fab-size-small svg {
    width: 17px;
    height: 17px;
}

.cdp-fab-size-medium svg {
    width: 22px;
    height: 22px;
}

.cdp-fab-size-large svg {
    width: 28px;
    height: 28px;
}

@media (max-width: 640px) {
    .cdp-design-bar .cdp-panel {
        padding: 12px 14px;
        flex-direction: column;
        align-items: stretch;
    }

    .cdp-design-bar .cdp-actions {
        flex-direction: column;
        align-items: stretch;
        width: 100%;
    }

    .cdp-design-bar .cdp-actions-main {
        flex-direction: column-reverse;
    }

    .cdp-btn {
        width: 100%;
        text-align: center;
    }

    .cdp-fab {
        bottom: min(var(--cdp-fab-offset, 16px), 12px);
        transform: scale(0.88);
        transform-origin: bottom;
    }

    .cdp-fab:hover {
        transform: scale(0.94);
    }

    .cdp-fab-pos-left {
        left: min(var(--cdp-fab-offset, 16px), 12px);
    }

    .cdp-fab-pos-right {
        right: min(var(--cdp-fab-offset, 16px), 12px);
    }
}