* { box-sizing: border-box; }
body.pd-designer-body {
    margin: 0; padding: 0;
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
    background: #fff;
    color: #1d1d1f;
}

#pd-app { display: flex; flex-direction: column; min-height: 100vh; }

.pd-app-header {
    display: flex; align-items: center; justify-content: space-between;
    padding: 14px 24px; border-bottom: 1px solid #e5e5e5;
    background: #fff; position: sticky; top: 0; z-index: 100;
}
.pd-app-logo { font-weight: 700; font-size: 17px; }
.pd-app-title { font-size: 15px; color: #6e6e73; }
.pd-btn-save-design {
    background: #fff; border: 1px solid #d2d2d7; border-radius: 980px;
    padding: 8px 18px; font-size: 14px; font-weight: 500; cursor: pointer;
}

.pd-app-main {
    flex: 1; display: flex; flex-wrap: wrap;
    max-width: 1400px; margin: 0 auto; width: 100%;
}
.pd-app-main--3col { align-items: flex-start; }

/* Serien-Spalte (links) */
.pd-series-col {
    width: 320px; flex: 0 0 320px; padding: 32px 18px;
    border-right: 1px solid #e5e5e5; box-sizing: border-box;
}
.pd-col-title {
    font-size: 14px; font-weight: 700; color: #1d1d1f;
    margin: 0 0 16px; text-transform: uppercase; letter-spacing: .5px;
}
.pd-series-list { display: flex; flex-direction: column; gap: 10px; }
.pd-series-card {
    border: 1.5px solid #e5e5e5; border-radius: 10px; padding: 8px;
    cursor: pointer; text-align: center; transition: all .15s; background: #fff;
}
.pd-series-card:hover { border-color: #b0b0b5; }
.pd-series-card--active { border-color: #1d1d1f; background: #F5F5F7; }
.pd-series-card img { width: 100%; height: 70px; object-fit: contain; margin-bottom: 6px; }
.pd-series-card-name { font-size: 12px; font-weight: 600; }

/* Vorschau-Spalte */
.pd-preview-col {
    flex: 1 1 auto; display: flex; flex-direction: column;
    padding: 32px 24px; align-items: center; min-width: 0;
}
.pd-canvas-wrap {
    width: 100%; max-width: 380px; aspect-ratio: 3/4;
    background: #F5F5F7; border-radius: 18px;
    display: flex; align-items: center; justify-content: center;
    box-shadow: 0 8px 24px rgba(0,0,0,0.08);
    margin-bottom: 20px; position: relative; overflow: hidden;
}
.pd-canvas { position: relative; width: 100%; height: 100%; }
.pd-canvas-loading, .pd-options-loading {
    position: absolute; top: 50%; left: 50%; transform: translate(-50%,-50%);
    color: #86868b; font-size: 14px;
}

/* Dezenter, pulsierender Lade-Indikator statt Text — Apple-Stil */
.pd-pulse-dot {
    display: block; width: 14px; height: 14px; border-radius: 50%;
    background: #d2d2d7;
    animation: pd-pulse 1.4s ease-in-out infinite;
}
@keyframes pd-pulse {
    0%, 100% { opacity: 0.35; transform: scale(0.85); }
    50%      { opacity: 0.8;  transform: scale(1.1); }
}
.pd-layer-img {
    position: absolute; max-width: 70%; object-fit: contain;
    pointer-events: none;
}

.pd-preis-bar {
    width: 100%; max-width: 380px;
    display: flex; align-items: center; justify-content: space-between;
    padding: 14px 4px; border-top: 1px solid #e5e5e5; margin-bottom: 12px;
}
.pd-preis-label { font-size: 14px; color: #6e6e73; }
.pd-preis-value {
    font-size: 22px; font-weight: 700;
    background-image: none !important;
    position: relative; z-index: 1;
}
.pd-preis-bar { position: relative; }
.pd-preis-bar::before, .pd-preis-bar::after { display: none !important; content: none !important; }
.pd-btn-warenkorb {
    width: 100%; max-width: 380px; background: #1d1d1f; color: #fff;
    border: none; border-radius: 980px; padding: 14px; font-size: 16px;
    font-weight: 600; cursor: pointer;
}
.pd-btn-warenkorb:hover { background: #000; }

/* Options-Spalte */
.pd-options-col {
    width: 320px; flex: 0 0 320px; padding: 32px 24px; border-left: 1px solid #e5e5e5;
    box-sizing: border-box;
}
.pd-tabs {
    display: flex; gap: 6px; margin-bottom: 24px; flex-wrap: wrap;
    border-bottom: 1px solid #e5e5e5; padding-bottom: 0;
}
.pd-tab {
    background: none; border: none; padding: 10px 4px; margin-right: 18px;
    font-size: 15px; font-weight: 500; color: #6e6e73; cursor: pointer;
    border-bottom: 2px solid transparent; transition: all .15s;
}
.pd-tab:hover { color: #1d1d1f; }
.pd-tab--active { color: #1d1d1f; border-bottom-color: #6e6e73; font-weight: 700; }

.pd-option-grid {
    display: grid; grid-template-columns: repeat(auto-fill, minmax(110px, 1fr));
    gap: 14px;
}
.pd-option-card {
    border: 1.5px solid #d2d2d7; border-radius: 12px; padding: 10px;
    cursor: pointer; text-align: center; transition: all .15s; background: #fff;
}
.pd-option-card:hover { border-color: #86868b; background: #fafafa; }
.pd-option-card--selected {
    border-color: #6e6e73; background: #f5f5f7;
    box-shadow: 0 0 0 1px #6e6e73 inset;
}
.pd-option-card img { width: 100%; height: 80px; object-fit: contain; margin-bottom: 8px; }
.pd-option-card-name { font-size: 12px; font-weight: 600; }
.pd-option-card-sub { font-size: 11px; color: #86868b; }
.pd-option-card-preis { font-size: 12px; font-weight: 700; color: #1d1d1f; margin-top: 4px; }
.pd-option-empty { color: #86868b; font-size: 14px; text-align: center; padding: 40px 0; grid-column: 1/-1; }

/* Größen-Auswahl unterhalb der Farb-Optionen */
.pd-size-row {
    display: flex; gap: 8px; flex-wrap: wrap; margin-top: 16px;
    padding-top: 16px; border-top: 1px solid #e5e5e5;
}
.pd-size-chip {
    padding: 6px 12px; border: 1.5px solid #e5e5e5; border-radius: 8px;
    font-size: 13px; cursor: pointer; background: #fff;
}
.pd-size-chip--active { border-color: #1d1d1f; background: #1d1d1f; color: #fff; font-weight: 600; }

@media (max-width: 880px) {
    .pd-options-col { border-left: none; border-top: 1px solid #e5e5e5; }
}

/* Farb-Dots auf den Bauteil-Karten */
.pd-option-card-colors {
    display: flex; gap: 5px; justify-content: center; margin-top: 8px; flex-wrap: wrap;
}
.pd-color-dot {
    width: 20px; height: 12px; border-radius: 3px; border: 1.5px solid #d2d2d7;
    background-size: cover; background-position: center; cursor: pointer; padding: 0;
    transition: border-color .15s;
}
.pd-color-dot:hover { border-color: #86868b; }
.pd-color-dot--active { border-color: #6e6e73; border-width: 2px; }
.pd-option-card-sub--size { font-weight: 500; }

/* Seitentitel */
.pd-page-title-bar {
    max-width: 1400px; width: 100%; margin: 0 auto; padding: 28px 24px 0;
    display: grid; grid-template-columns: 1fr auto 1fr; align-items: center;
    box-sizing: border-box;
}
.pd-page-title-bar .pd-page-title {
    grid-column: 2; margin: 0; text-align: center;
}
.pd-page-title-bar .pd-title-actions {
    grid-column: 3; justify-self: end;
}
.pd-page-title {
    font-size: 32px; font-weight: 700; margin: 0; color: #1d1d1f;
    letter-spacing: -0.02em;
}

/* "Ohne"-Karte für optionale Bauteile */
.pd-option-card--entfernen {
    display: flex; flex-direction: column; align-items: center; justify-content: center;
}
.pd-option-card-no-icon {
    width: 100%; height: 80px; display: flex; align-items: center; justify-content: center;
    font-size: 28px; color: #d2d2d7; margin-bottom: 8px;
}
.pd-option-card--entfernen.pd-option-card--selected .pd-option-card-no-icon { color: #86868b; }

/* Gesperrter Tab (Aufsatz ohne Deckel) */
.pd-tab--disabled {
    color: #d2d2d7 !important; cursor: not-allowed;
    border-bottom-color: transparent !important;
}

/* Serien-Bereich (linke Spalte) */
.pd-series-hint { font-size: 12px; color: #6e6e73; margin: 0 0 14px; line-height: 1.4; }
.pd-btn-show-series {
    width: 100%; padding: 10px; border: 1.5px solid #d2d2d7; border-radius: 8px;
    background: #fff; font-size: 13px; font-weight: 600; cursor: pointer; margin-bottom: 16px;
}
.pd-btn-show-series:hover { border-color: #86868b; background: #fafafa; }

.pd-series-table { width: 100%; border-collapse: collapse; font-size: 12px; margin-bottom: 14px; table-layout: fixed; }
.pd-series-table th:first-child, .pd-series-table td:first-child { white-space: nowrap; width: 58px; }
.pd-series-table thead th {
    text-align: left; padding: 6px 4px; border-bottom: 1.5px solid #d2d2d7;
    font-weight: 600; color: #6e6e73; font-size: 11px;
}
.pd-series-table tbody td { padding: 8px 4px; border-bottom: 1px solid #e5e5e5; }
.pd-series-qty-input {
    width: 40px; padding: 4px; border: 1.5px solid #d2d2d7; border-radius: 6px;
    text-align: center; font-size: 12px;
}
.pd-series-all-row {
    font-size: 12px; padding: 10px 4px; border-top: 1px solid #e5e5e5; margin-bottom: 10px;
}
.pd-series-all-row input { margin: 0 6px; }
.pd-series-total {
    display: flex; justify-content: space-between; align-items: center;
    padding: 10px 4px; border-top: 1.5px solid #d2d2d7; margin-bottom: 14px;
    font-size: 14px;
}
.pd-btn-warenkorb--series {
    background: #fff; color: #1d1d1f; border: 1.5px solid #1d1d1f;
}
.pd-btn-warenkorb--series:hover { background: #f5f5f7; }

/* Dezenter Bodenschatten unter dem Pokal — wirkt hochwertiger als reine PNG-Stapelung */
.pd-pokal-shadow {
    position: absolute;
    width: 42%;
    height: 12px;
    background: radial-gradient(ellipse at center, rgba(0,0,0,0.18) 0%, rgba(0,0,0,0.08) 50%, transparent 80%);
    left: 50%;
    transform: translateX(-50%);
    border-radius: 50%;
    pointer-events: none;
    z-index: 0;
}
.pd-canvas { position: relative; z-index: 1; }

/* Anzahl-Größen-Hinweis bei Fuß/Cup */
.pd-option-card-anzahl {
    font-size: 10.5px; color: #86868b; margin-top: 2px;
}

/* Apple-Clean: gerichtetes Einsetzen je nach Position im Stapel —
   untere/schwere Teile (Marmor, Fuß) gleiten seitlich ein (Richtung wechselt
   abwechselnd links/rechts bei jeder neuen Auswahl, gesteuert per JS),
   obere/leichte Teile (Cup, Deckel, Aufsatz/Emblem) setzen sich von oben auf. */
@keyframes pd-fade-in-soft {
    from { opacity: 0; transform: scale(0.97); }
    to   { opacity: 1; transform: scale(1); }
}
@keyframes pd-slide-in-right {
    from { opacity: 0; transform: translateX(28px); }
    to   { opacity: 1; transform: translateX(0); }
}
@keyframes pd-slide-in-left {
    from { opacity: 0; transform: translateX(-28px); }
    to   { opacity: 1; transform: translateX(0); }
}
@keyframes pd-slide-in-top {
    from { opacity: 0; transform: translateY(-22px); }
    to   { opacity: 1; transform: translateY(0); }
}

/* Standard (z.B. initiales Laden, kein data-dir gesetzt): dezentes Fade-In */
.pd-layer-img {
    animation: pd-fade-in-soft 0.28s cubic-bezier(0.4, 0, 0.2, 1);
}

/* Gerade ausgewähltes Bauteil: gerichtete Animation je nach Slot + Richtung */
.pd-layer-img[data-slot="marmor"][data-dir="right"],
.pd-layer-img[data-slot="fuss"][data-dir="right"] {
    animation: pd-slide-in-right 0.32s cubic-bezier(0.16, 1, 0.3, 1);
}
.pd-layer-img[data-slot="marmor"][data-dir="left"],
.pd-layer-img[data-slot="fuss"][data-dir="left"] {
    animation: pd-slide-in-left 0.32s cubic-bezier(0.16, 1, 0.3, 1);
}
.pd-layer-img[data-slot="cup"][data-dir],
.pd-layer-img[data-slot="deckel"][data-dir],
.pd-layer-img[data-slot="emblem"][data-dir],
.pd-layer-img[data-slot="figur"][data-dir] {
    animation: pd-slide-in-top 0.32s cubic-bezier(0.16, 1, 0.3, 1);
}

/* Schatten bewegt sich weich mit, statt zu springen, wenn sich die Höhe ändert */
.pd-pokal-shadow {
    transition: top 0.28s cubic-bezier(0.4, 0, 0.2, 1);
}

/* Info-Icon neben Warenkorb-Button */
.pd-warenkorb-row {
    width: 100%; max-width: 380px; display: flex; align-items: center; gap: 10px;
    position: relative;
}
.pd-warenkorb-row .pd-btn-warenkorb { flex: 1; }
.pd-info-icon {
    flex-shrink: 0; width: 28px; height: 28px; border-radius: 50%;
    border: 1.5px solid #d2d2d7; background: #fff; color: #6e6e73;
    font-size: 13px; font-weight: 700; font-style: italic; cursor: pointer;
    display: flex; align-items: center; justify-content: center;
}
.pd-info-icon:hover { border-color: #86868b; color: #1d1d1f; }
.pd-info-tooltip {
    display: none; position: absolute; bottom: calc(100% + 10px); right: 0;
    width: 260px; background: #1d1d1f; color: #fff; font-size: 12.5px; line-height: 1.5;
    padding: 12px 14px; border-radius: 10px; box-shadow: 0 8px 20px rgba(0,0,0,0.18);
    z-index: 20;
}
.pd-info-tooltip::after {
    content: ''; position: absolute; bottom: -6px; right: 12px;
    width: 12px; height: 12px; background: #1d1d1f; transform: rotate(45deg);
}
.pd-info-tooltip--visible { display: block; }

/* Minimaler 3D-Effekt: dezenter Schlagschatten direkt an den Bauteil-Konturen,
   folgt der PNG-Form statt eines rechteckigen Kastens — wirkt plastischer. */
.pd-layer-img {
    filter: drop-shadow(0 3px 4px rgba(0,0,0,0.18)) drop-shadow(0 1px 2px rgba(0,0,0,0.10));
}

/* Ausverkaufte Pokal-Kombination in der Serien-Tabelle */
.pd-series-row--ausverkauft { opacity: 0.45; }
.pd-series-row--ausverkauft td { color: #86868b; }
.pd-series-ausverkauft-label {
    font-size: 11px; font-weight: 600; color: #6e6e73; text-transform: uppercase; letter-spacing: 0.3px;
}

/* Speichern & Teilen Button + Modal */
/* (Duplikat entfernt — Regel ist bereits oben in .pd-page-title-bar definiert) */
.pd-btn-save-share {
    padding: 10px 18px; border: 1.5px solid #d2d2d7; border-radius: 980px;
    background: #fff; font-size: 14px; font-weight: 500; cursor: pointer;
}
.pd-btn-save-share:hover { border-color: #86868b; background: #fafafa; }

.pd-modal-overlay {
    display: none; position: fixed; inset: 0; background: rgba(0,0,0,0.4);
    z-index: 1000; align-items: center; justify-content: center;
}
.pd-modal-overlay--visible { display: flex; }
.pd-modal {
    background: #fff; border-radius: 16px; padding: 28px; max-width: 380px; width: 90%;
    position: relative; box-shadow: 0 20px 50px rgba(0,0,0,0.25);
}
.pd-modal h3 { margin: 0 0 10px; font-size: 19px; }
.pd-modal-hint { font-size: 13.5px; color: #6e6e73; line-height: 1.5; margin: 0 0 18px; }
.pd-modal-close {
    position: absolute; top: 16px; right: 16px; background: none; border: none;
    font-size: 16px; color: #86868b; cursor: pointer;
}
#pd-save-email {
    width: 100%; padding: 11px 14px; border: 1.5px solid #d2d2d7; border-radius: 10px;
    font-size: 14px; margin-bottom: 14px; box-sizing: border-box;
}
.pd-btn-save-submit {
    width: 100%; padding: 12px; background: #1d1d1f; color: #fff; border: none;
    border-radius: 980px; font-size: 14.5px; font-weight: 600; cursor: pointer;
}
.pd-btn-save-submit:hover { background: #000; }
.pd-modal-message { margin-top: 14px; font-size: 13.5px; text-align: center; color: #1d1d1f; }
.pd-modal-message--success { color: #1d1d1f; font-weight: 600; }
.pd-modal-message--error { color: #6e6e73; }

/* Honeypot — für echte Nutzer komplett unsichtbar, Bots füllen es trotzdem aus */
.pd-honeypot {
    position: absolute !important; left: -9999px !important; width: 1px; height: 1px;
    opacity: 0; pointer-events: none;
}

/* Teilen-Modal */
.pd-title-actions { display: flex; gap: 8px; }
#pd-share-link {
    width: 100%; padding: 10px 12px; border: 1.5px solid #d2d2d7; border-radius: 10px;
    font-size: 13px; margin-bottom: 14px; box-sizing: border-box; background: #f5f5f7;
}
.pd-share-buttons { display: flex; gap: 8px; flex-wrap: wrap; }
.pd-btn-share-action {
    flex: 1; text-align: center; padding: 10px 12px; border: 1.5px solid #d2d2d7;
    border-radius: 10px; background: #fff; font-size: 13px; font-weight: 500;
    cursor: pointer; text-decoration: none; color: #1d1d1f; white-space: nowrap;
}
.pd-btn-share-action:hover { border-color: #86868b; background: #fafafa; }
#pd-share-loading { text-align: center; color: #86868b; padding: 10px 0; }

/* Icon-Buttons (Teilen/Speichern) — reine Outline-SVGs, schwarz/weiß */
.pd-icon-btn {
    width: 40px; height: 40px; border-radius: 50%;
    border: 1.5px solid #d2d2d7; background: #fff;
    display: flex; align-items: center; justify-content: center;
    cursor: pointer; color: #1d1d1f; padding: 0;
}
.pd-icon-btn:hover { border-color: #1d1d1f; background: #f5f5f7; }
.pd-icon-btn svg { width: 19px; height: 19px; }

/* MwSt./Versand-Hinweis unter den Preisangaben */
.pd-preis-hinweis {
    font-size: 10.5px; color: #86868b; text-align: right; margin: -8px 0 12px;
}
.pd-preis-hinweis--mitte { width: 100%; max-width: 380px; text-align: center; margin: -10px 0 14px; }

/* ===== Gravur/Emblem-Wizard ===== */
.pd-modal--gravur {
    max-width: 560px;
    width: 92%;
    max-height: 86vh;
    overflow-y: auto;
    padding: 32px;
}
.pd-gravur-progress {
    font-size: 13px; color: #6e6e73; margin: 0 0 18px; text-align: center;
    font-weight: 600; letter-spacing: 0.02em;
}
.pd-gravur-step-body { margin-bottom: 22px; }
.pd-gravur-step-title { font-size: 18px; font-weight: 700; color: #1d1d1f; margin: 0 0 4px; }
.pd-gravur-step-sub { font-size: 13.5px; color: #6e6e73; margin: 0 0 20px; }

.pd-gravur-zeile {
    display: flex; align-items: center; gap: 10px; margin-bottom: 10px;
}
.pd-gravur-zeile input[type="text"] {
    flex: 1; padding: 10px 13px; border: 1.5px solid #d2d2d7; border-radius: 10px;
    font-size: 14px; box-sizing: border-box;
}
.pd-gravur-zeile-count { font-size: 11.5px; color: #86868b; min-width: 52px; text-align: right; }
.pd-gravur-fett-toggle {
    width: 34px; height: 34px; border-radius: 8px; border: 1.5px solid #d2d2d7;
    background: #fff; font-weight: 700; cursor: pointer; flex-shrink: 0; color: #1d1d1f;
}
.pd-gravur-fett-toggle--aktiv { background: #1d1d1f; color: #fff; border-color: #1d1d1f; }

.pd-gravur-optionen-row {
    display: flex; gap: 14px; margin: 18px 0; flex-wrap: wrap;
}
.pd-gravur-optionen-row > div { flex: 1; min-width: 140px; }
.pd-gravur-optionen-row label {
    display: block; font-size: 12px; color: #6e6e73; margin-bottom: 6px; font-weight: 600;
}
.pd-gravur-optionen-row select {
    width: 100%; padding: 9px 10px; border: 1.5px solid #d2d2d7; border-radius: 10px;
    font-size: 13.5px; box-sizing: border-box; background: #fff;
}
.pd-schildfarbe-row { display: flex; gap: 10px; }
.pd-schildfarbe-dot {
    width: 32px; height: 32px; border-radius: 50%; cursor: pointer;
    border: 2.5px solid transparent;
}
.pd-schildfarbe-dot--gold { background: #c9a84c; }
.pd-schildfarbe-dot--silber { background: #a8a9ad; }
.pd-schildfarbe-dot--aktiv { border-color: #1d1d1f; }

.pd-gravur-kopier-hinweis {
    font-size: 12.5px; color: #86868b; margin: 0 0 16px; display: flex;
    align-items: center; gap: 6px;
}

.pd-emblem-block { margin-top: 24px; padding-top: 20px; border-top: 1px solid #e8e8ed; }
.pd-emblem-block h4 { font-size: 14.5px; margin: 0 0 12px; color: #1d1d1f; }
.pd-emblem-wahl-row { display: flex; gap: 10px; margin-bottom: 14px; }
.pd-emblem-wahl-btn {
    flex: 1; padding: 10px; border: 1.5px solid #d2d2d7; border-radius: 10px;
    background: #fff; font-size: 13px; cursor: pointer; color: #1d1d1f;
}
.pd-emblem-wahl-btn--aktiv { background: #1d1d1f; color: #fff; border-color: #1d1d1f; }

.pd-gravur-nav { display: flex; justify-content: space-between; gap: 12px; }
.pd-btn-gravur-zurueck, .pd-btn-gravur-weiter {
    flex: 1; padding: 13px; border-radius: 980px; font-size: 14.5px; font-weight: 600;
    cursor: pointer; border: 1.5px solid #1d1d1f;
}
.pd-btn-gravur-zurueck { background: #fff; color: #1d1d1f; }
.pd-btn-gravur-zurueck:hover { background: #f5f5f7; }
.pd-btn-gravur-weiter { background: #1d1d1f; color: #fff; }
.pd-btn-gravur-weiter:hover { background: #000; }
.pd-btn-gravur-zurueck--versteckt { visibility: hidden; }

.pd-gravur-zusammenfassung {
    background: #f5f5f7; border-radius: 12px; padding: 16px; margin-bottom: 18px;
    max-height: 240px; overflow-y: auto;
}
.pd-gravur-zusammenfassung-item {
    font-size: 12.5px; color: #3a3a3c; padding: 8px 0; border-bottom: 1px solid #e8e8ed;
}
.pd-gravur-zusammenfassung-item:last-child { border-bottom: none; }
.pd-gravur-bestaetigung-row {
    display: flex; align-items: flex-start; gap: 10px; margin-bottom: 20px;
}
.pd-gravur-bestaetigung-row input[type="checkbox"] { margin-top: 3px; flex-shrink: 0; }
.pd-gravur-bestaetigung-row label { font-size: 12.5px; color: #3a3a3c; line-height: 1.5; }

/* ===== Schild-Vorschau im Gravur-Wizard ===== */
.pd-schild-vorschau {
    border-radius: 4px;
    padding: 0 6px;
    margin: 0 auto 20px;
    box-sizing: border-box;
    box-shadow: inset 0 1px 2px rgba(255,255,255,0.4), 0 2px 6px rgba(0,0,0,0.15);
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: stretch;
    position: relative;
}
.pd-schild-vorschau--gold {
    background: linear-gradient(155deg, #e6c976 0%, #c9a84c 45%, #b8943a 100%);
}
.pd-schild-vorschau--silber {
    background: linear-gradient(155deg, #d4d5d8 0%, #a8a9ad 45%, #93949a 100%);
}
.pd-schild-zeile-preview {
    color: #2b2b2b;
    white-space: pre-wrap;
    word-break: break-word;
    flex-shrink: 0;
    flex-grow: 0;
}
.pd-schild-zeile-preview--align-left { text-align: left; }
.pd-schild-zeile-preview--align-center { text-align: center; }
.pd-schild-zeile-preview--align-right { text-align: right; }
.pd-schild-zeile-preview--bold { font-weight: 700; }
.pd-schild-zeile-preview--italic { font-style: italic; }

/* ===== Erweiterte Gravur-Zeile (Ausrichtung, Kursiv) ===== */
.pd-gravur-align-btn {
    width: 30px; height: 34px; border-radius: 8px; border: 1.5px solid #d2d2d7;
    background: #fff; cursor: pointer; flex-shrink: 0; color: #6e6e73;
    display: flex; align-items: center; justify-content: center; font-size: 13px;
}
.pd-gravur-align-btn--aktiv { background: #1d1d1f; color: #fff; border-color: #1d1d1f; }
.pd-gravur-align-gruppe { display: flex; gap: 4px; flex-shrink: 0; }
.pd-gravur-italic-toggle {
    width: 34px; height: 34px; border-radius: 8px; border: 1.5px solid #d2d2d7;
    background: #fff; font-weight: 700; font-style: italic; cursor: pointer;
    flex-shrink: 0; color: #1d1d1f;
    display: flex; align-items: center; justify-content: center;
}
.pd-gravur-italic-toggle--aktiv { background: #1d1d1f; color: #fff; border-color: #1d1d1f; }
.pd-gravur-fett-btn {
    width: 34px; height: 34px; border-radius: 8px; border: 1.5px solid #d2d2d7;
    background: #fff; font-weight: 700; cursor: pointer;
    flex-shrink: 0; color: #1d1d1f;
    display: flex; align-items: center; justify-content: center;
}
.pd-gravur-fett-btn--aktiv { background: #1d1d1f; color: #fff; border-color: #1d1d1f; }

.pd-gravur-zeile4-hinweis {
    margin-bottom: 10px;
}
.pd-btn-zeile4-hinzufuegen {
    border: 1.5px dashed #d2d2d7; background: none; color: #6e6e73; cursor: pointer;
    border-radius: 10px; padding: 9px 16px; font-size: 13px; width: 100%; text-align: center;
}
.pd-btn-zeile4-hinzufuegen:hover { border-color: #86868b; color: #1d1d1f; }

.pd-keine-gravur-hinweis {
    font-size: 12.5px; color: #6e6e73; margin: 10px 0 0; display: flex;
    align-items: center; gap: 6px; cursor: pointer;
}
.pd-keine-gravur-hinweis input { margin: 0; }

.pd-emblem-bibliothek-grid {
    display: grid; grid-template-columns: repeat(4, 1fr); gap: 8px; margin-top: 12px;
}
.pd-emblem-bibliothek-item {
    border: 1.5px solid #d2d2d7; border-radius: 10px; padding: 8px; cursor: pointer;
    text-align: center; font-size: 11px; color: #6e6e73; background: #fff;
}
.pd-emblem-bibliothek-item--aktiv { border-color: #1d1d1f; background: #f5f5f7; color: #1d1d1f; }
.pd-emblem-upload-zone {
    border: 1.5px dashed #d2d2d7; border-radius: 10px; padding: 20px; text-align: center;
    margin-top: 12px; color: #6e6e73; font-size: 13px;
}
.pd-emblem-upload-zone input[type="file"] { margin-top: 10px; }

/* ===== Schriftgroessen-Steuerung (pt, Plus/Minus) ===== */
.pd-schriftgroesse-row {
    display: flex; align-items: center; gap: 10px;
}
.pd-schriftgroesse-btn {
    width: 32px; height: 32px; border-radius: 8px; border: 1.5px solid #d2d2d7;
    background: #fff; cursor: pointer; color: #1d1d1f; font-size: 16px; font-weight: 600;
}
.pd-schriftgroesse-btn:hover { border-color: #86868b; background: #f5f5f7; }
.pd-schriftgroesse-wert {
    font-size: 13.5px; color: #1d1d1f; min-width: 32px; text-align: center; font-weight: 600;
}

/* ===== Emblem-Bibliothek im Gravur-Wizard ===== */
.pd-emblem-bibliothek-ui { margin-top: 10px; }
.pd-emblem-kat-select {
    width: 100%; padding: 9px 12px; border: 1.5px solid #d2d2d7;
    border-radius: 10px; font-size: 14px; margin-bottom: 12px;
    background: #fff; color: #1d1d1f;
}
.pd-emblem-bibliothek-grid {
    display: grid; grid-template-columns: repeat(3, 1fr);
    gap: 10px; max-height: 320px; overflow-y: auto;
}
@media (max-width: 480px) {
    .pd-emblem-bibliothek-grid { grid-template-columns: repeat(2, 1fr); }
}
.pd-emblem-bibliothek-item {
    border: 1.5px solid #d2d2d7; border-radius: 12px; padding: 10px 8px;
    cursor: pointer; text-align: center; font-size: 11px;
    color: #6e6e73; background: #fff;
}
.pd-emblem-bibliothek-item:hover { border-color: #86868b; }
.pd-emblem-bibliothek-item--aktiv { border-color: #86868b; background: #f5f5f7; box-shadow: 0 0 0 2px #d2d2d7; }
.pd-emblem-bibliothek-item img { width: 100%; height: 86px; object-fit: contain; border-radius: 50%; background: transparent; }
.pd-emblem-kat-titel { font-size: 15px; font-weight: 600; color: #1d1d1f; margin: 0 0 10px; }
.pd-emblem-kein-toggle {
    display: flex; align-items: center; justify-content: space-between;
    width: 100%; padding: 12px 16px; border: 1.5px solid #1d1d1f; border-radius: 12px;
    background: none; color: #1d1d1f; font-size: 14px; font-weight: 500; cursor: pointer;
    margin-bottom: 14px;
}
.pd-emblem-kein-toggle--aktiv { background: #1d1d1f; color: #fff; }
.pd-emblem-kein-toggle-dot {
    width: 20px; height: 20px; border-radius: 50%; border: 1.5px solid currentColor;
    display: flex; align-items: center; justify-content: center; font-size: 12px;
    flex-shrink: 0;
}
.pd-emblem-farb-zeile {
    display: flex; align-items: center; gap: 10px; margin-top: 14px; flex-wrap: wrap;
}
.pd-emblem-farb-zeile-label { font-size: 12px; color: #6e6e73; width: 100%; }
.pd-emblem-aufpreis-hinweis {
    font-size: 12px; color: #6e6e73; margin: 8px 0 0;
}
.pd-emblem-laden { color: #86868b; font-size: 13px; padding: 10px 0; }
.pd-logo-upload-ui { margin-top: 10px; }
.pd-logo-upload-input {
    width: 100%; padding: 8px; border: 1.5px dashed #d2d2d7;
    border-radius: 10px; font-size: 13px; cursor: pointer;
}

/* ===== Emblem-Farb-Auswahl (Gold/Silber/Bronze) ===== */
.pd-emblem-farb-row {
    display: flex; align-items: center; gap: 8px; margin-top: 12px;
}
.pd-emblem-farb-label {
    font-size: 12px; color: #6e6e73;
}
.pd-emblem-farb-icon {
    width: 36px; height: 18px; border-radius: 4px; cursor: pointer;
    border: 2px solid transparent; object-fit: cover;
    transition: border-color 0.15s; opacity: 0.75;
}
.pd-emblem-farb-icon--aktiv {
    border-color: #86868b;
    opacity: 1;
    box-shadow: 0 0 0 1px #d2d2d7;
}
.pd-emblem-farb-icon:hover { opacity: 1; border-color: #d2d2d7; }

/* ===== Emblem Toggle-Zeile ===== */
.pd-emblem-toggle-zeile {
    display: flex; align-items: center; justify-content: space-between;
    padding: 14px 0 10px; border-top: 1px solid #f0f0f0; margin-top: 10px;
}
.pd-emblem-toggle-label {
    font-size: 15px; font-weight: 500; color: #1d1d1f;
}

/* ===== iOS-style Toggle ===== */
.pd-toggle { position:relative; display:inline-block; width:44px; height:26px; flex-shrink:0; }
.pd-toggle input { opacity:0; width:0; height:0; }
.pd-toggle__slider {
    position:absolute; cursor:pointer; inset:0;
    background:#d2d2d7; border-radius:26px; transition:.2s;
}
.pd-toggle__slider:before {
    content:''; position:absolute; width:20px; height:20px;
    left:3px; bottom:3px; background:#fff; border-radius:50%;
    transition:.2s; box-shadow:0 1px 3px rgba(0,0,0,0.2);
}
.pd-toggle input:checked + .pd-toggle__slider { background:#1d1d1f; }
.pd-toggle input:checked + .pd-toggle__slider:before { transform:translateX(18px); }

/* ===== Gravur-Zusammenfassung ===== */
.pd-zus-pokal {
    border: 1px solid #e5e5ea; border-radius: 12px;
    padding: 14px 16px; margin-bottom: 12px; background: #fafafa;
}
.pd-zus-pokal-titel {
    font-size: 14px; font-weight: 600; color: #1d1d1f; margin-bottom: 8px;
    padding-bottom: 8px; border-bottom: 1px solid #e5e5ea;
}
.pd-zus-zeile {
    font-size: 15px; color: #1d1d1f; padding: 2px 0; line-height: 1.5;
}
.pd-zus-zeile--leer { color: #86868b; font-style: italic; }
.pd-zus-meta {
    font-size: 11px; color: #86868b; margin-top: 6px;
}
.pd-zus-emblem {
    font-size: 13px; color: #1d1d1f; margin-top: 8px;
    padding-top: 8px; border-top: 1px solid #e5e5ea;
}

/* ===== Serie: Zusammenfassung + Komplett-Block ===== */
.pd-series-zusammenfassung {
    border-top: 1.5px solid #d2d2d7; padding: 10px 4px;
}
.pd-series-zusammenfassung-zeile {
    display: flex; justify-content: space-between; align-items: center;
    font-size: 14px; font-weight: 600; color: #1d1d1f; margin-bottom: 2px;
}
.pd-series-komplett-block {
    border-top: 1px solid #e5e5e5; padding: 8px 4px;
}
.pd-series-komplett-text {
    font-size: 12px; color: #1d1d1f; font-weight: 500;
}
.pd-series-komplett-row {
    display: flex; align-items: center; justify-content: space-between;
}
.pd-series-qty-input-all {
    width: 40px; padding: 4px; border: 1.5px solid #d2d2d7;
    border-radius: 6px; text-align: center; font-size: 12px;
}

/* ===== Alle uebernehmen Button ===== */
.pd-btn-alle-uebernehmen {
    width: 100%; padding: 11px 16px; margin: 12px 0 4px;
    border: 1.5px solid #1d1d1f; border-radius: 12px;
    background: #fff; color: #1d1d1f; font-size: 13px;
    font-weight: 500; cursor: pointer; text-align: center;
}
.pd-btn-alle-uebernehmen:hover { background: #f5f5f7; }

/* ===== Gravur-Wizard Tabs ===== */
.pd-gravur-tabs {
    display: flex; flex-wrap: wrap; gap: 6px;
    padding: 0 0 12px; border-bottom: 1px solid #e5e5ea; margin-bottom: 16px;
}
.pd-gravur-tab {
    min-width: 32px; height: 32px; padding: 0 8px;
    border: 1.5px solid #d2d2d7; border-radius: 8px;
    background: #fff; color: #6e6e73; font-size: 12px;
    font-weight: 500; cursor: pointer;
}
.pd-gravur-tab--aktiv {
    background: #1d1d1f; color: #fff; border-color: #1d1d1f;
}
.pd-gravur-tab--gefuellt {
    border-color: #86868b; color: #1d1d1f;
}
.pd-gravur-tab--gefuellt.pd-gravur-tab--aktiv {
    background: #1d1d1f; color: #fff;
}
.pd-gravur-tab--zus {
    background: #f5f5f7; font-size: 14px;
}

/* ===== Alle uebernehmen Zeile ===== */
.pd-gravur-alle-row {
    display: flex; align-items: center; gap: 8px;
    padding: 10px 0 0; border-top: 1px solid #e5e5ea; margin-top: 8px;
}
.pd-btn-alle-uebernehmen {
    flex: 1; padding: 9px 12px; border: 1.5px solid #d2d2d7;
    border-radius: 10px; background: #fff; color: #1d1d1f;
    font-size: 12px; font-weight: 500; cursor: pointer; text-align: center;
}
.pd-btn-alle-uebernehmen:hover { border-color: #86868b; background: #f5f5f7; }
.pd-gravur-alle-info {
    width: 22px; height: 22px; border-radius: 50%;
    border: 1.5px solid #d2d2d7; display: flex; align-items: center;
    justify-content: center; font-size: 12px; color: #86868b;
    cursor: help; flex-shrink: 0; background: #f5f5f7;
    font-style: italic; font-weight: 600;
}