/* ============================================================
   BOTOFOX — Layout Designer (Kunden-Tool)
   Nutzt die V2-Designtokens aus styles-v2.css (Farben, Fonts).
   ============================================================ */

.ld-body { background: var(--paper-2); min-height: 100vh; }

/* ---- Top bar ---- */
.ld-topbar {
    position: sticky; top: 0; z-index: 50;
    background: var(--ink); color: #fff;
    display: flex; align-items: center; gap: 1rem;
    padding: .7rem 1.1rem;
    box-shadow: 0 2px 14px rgba(23,20,27,.18);
}
.ld-topbar .ld-logo { height: 22px; }
.ld-topbar .ld-title { font-family: var(--font-display); font-weight: 700; font-size: 1rem; }
.ld-topbar .ld-title small { display:block; font-family: var(--font-body); font-weight:400; font-size:.7rem; color: rgba(255,255,255,.55); }
.ld-spacer { flex: 1; }
.ld-tbtn {
    display: inline-flex; align-items: center; gap: .45rem;
    font-family: var(--font-body); font-weight: 600; font-size: .88rem;
    padding: .55rem .95rem; border-radius: 50px; border: none; cursor: pointer;
    background: rgba(255,255,255,.1); color: #fff; transition: all .2s ease;
}
.ld-tbtn:hover { background: rgba(255,255,255,.2); }
.ld-tbtn.primary { background: var(--coral); box-shadow: var(--shadow-coral); }
.ld-tbtn.primary:hover { background: var(--coral-deep); }
.ld-tbtn i { font-size: 1.1rem; }

/* ---- Workspace layout ---- */
.ld-workspace { display: grid; grid-template-columns: 1fr; }
@media (min-width: 1000px) {
    .ld-workspace { grid-template-columns: 320px 1fr 360px; height: calc(100vh - 56px); }
}
@media (min-width: 1500px) {
    .ld-workspace { grid-template-columns: 360px 1fr 400px; }
}

/* ---- Left: templates ---- */
.ld-panel { background: var(--paper); border-right: 1px solid var(--cream-line); overflow-y: auto; }
.ld-panel-r { border-right: none; border-left: 1px solid var(--cream-line); }
.ld-panel h3 {
    font-family: var(--font-display); font-weight: 700; font-size: .82rem;
    text-transform: uppercase; letter-spacing: .08em; color: var(--text-light);
    padding: 1rem 1.1rem .4rem;
}
.ld-templates { display: grid; grid-template-columns: 1fr 1fr; gap: .6rem; padding: .4rem 1rem 1.2rem; }
.ld-tpl {
    border: 2px solid var(--cream-line); border-radius: 12px; overflow: hidden;
    cursor: pointer; background: #fff; transition: all .18s ease; padding: 0; aspect-ratio: 3/4;
    display: grid; place-items: center;
}
.ld-tpl:hover { border-color: var(--coral); transform: translateY(-2px); }
.ld-tpl.active { border-color: var(--coral); box-shadow: 0 0 0 3px rgba(108, 68, 228,.18); }
.ld-tpl img { width: 100%; height: 100%; object-fit: contain; background: var(--paper-2); }
.ld-tpl-empty { font-size: .7rem; color: var(--text-light); text-align: center; padding: .5rem; }
/* Vorschau im echten Format zeigen: Quer über volle Breite, Streifen hoch, Hoch wie gehabt */
.ld-tpl[data-fmt="landscape"] { aspect-ratio: 3/2; grid-column: 1 / -1; }
/* Preview zeigt den ganzen Bogen (1200×1800 = 2/3), nicht einen einzelnen
   Streifen (1/3) → Kachel-Ratio = Bild-Ratio, sonst riesige Leerränder. */
.ld-tpl[data-fmt="fotostreifen"] { aspect-ratio: 2/3; }
.ld-tpl[data-fmt="portrait"] { aspect-ratio: 3/4; }

/* ---- Center: canvas ---- */
.ld-canvas-wrap {
    background:
        radial-gradient(circle at 50% 0%, rgba(108, 68, 228,.05), transparent 60%),
        var(--paper-2);
    display: flex; flex-direction: column; align-items: center; justify-content: center;
    padding: 1.4rem; overflow: auto; gap: 1rem;
}
.ld-stage-shell {
    position: relative;
    box-shadow: var(--shadow-lg);
    border-radius: 4px; overflow: hidden;
    background: #fff;
    container-type: inline-size;
    max-width: 100%;
    /* NICHT schrumpfen: im Flex-Spalten-Wrap würde flex-shrink bei hohem
       Hochformat nur die Höhe stauchen (Breite ist fix) → aspect-ratio
       verzerrt. Lieber Höhe behalten, Wrap scrollt (overflow:auto). */
    flex-shrink: 0;
    transition: width .45s cubic-bezier(.4,0,.2,1), aspect-ratio .45s cubic-bezier(.4,0,.2,1);
}

/* ---- Hilfslinien (Sicherheitszone + Schnittlinie) ---- */
.ld-guides { position: absolute; inset: 0; pointer-events: none; z-index: 5000; }
.ld-guides.hidden { display: none; }
.ld-safe {
    position: absolute;
    border: 1.5px dashed rgba(108, 68, 228,.85);
    border-radius: 2px;
}
.ld-safe-label {
    position: absolute; top: 3px; left: 6px;
    font: 600 9px/1 var(--font-body, sans-serif);
    color: rgba(108, 68, 228,.95); letter-spacing: .04em; text-transform: uppercase;
    background: rgba(251,248,243,.7); padding: 2px 4px; border-radius: 4px;
}
.ld-cut {
    position: absolute; top: 0; bottom: 0;
    width: 0; border-left: 2px dashed var(--coral);
    filter: drop-shadow(0 0 1px rgba(255,255,255,.6));
}
.ld-cut::after {
    content: 'Schnittlinie ✂';
    position: absolute; top: 8px; left: 50%; transform: translateX(-50%);
    font: 700 9px/1 var(--font-body, sans-serif); white-space: nowrap;
    color: #fff; background: var(--coral); padding: 3px 7px; border-radius: 50px;
}

/* gespiegelter rechter Streifen (nur Anzeige, nicht editierbar) */
.ld-mirror { opacity: .9; }
.ld-mirror.ld-photo { border-style: dashed; }
.ld-mirror-tag {
    position: absolute; pointer-events: none;
    font: 600 9px/1 var(--font-body, sans-serif);
    color: var(--text-light); background: rgba(251,248,243,.8);
    padding: 3px 6px; border-radius: 50px;
}
.ld-stage {
    position: absolute; inset: 0;
    background-size: cover; background-position: center;
}
/* touch-action:none → Browser stiehlt das vertikale Ziehen nicht fürs Seitenscrollen
   (sonst lassen sich Platzhalter auf Mobile nur waagerecht verschieben). */
.ld-el { position: absolute; box-sizing: border-box; cursor: grab; user-select: none; touch-action: none; }
.ld-el.selected { outline: 2px solid var(--coral); outline-offset: 1px; z-index: 999 !important; }
.ld-el:active { cursor: grabbing; }

.ld-photo {
    background: rgba(255,255,255,.66);
    -webkit-backdrop-filter: blur(1px); backdrop-filter: blur(1px);
    border: 2.5px solid var(--coral);
    box-shadow: inset 0 0 0 2px rgba(255,255,255,.6), 0 2px 8px rgba(23,20,27,.12);
    display: grid; place-items: center; color: var(--ink);
    border-radius: 4px;
}
.ld-photo .ld-photo-label {
    display:flex; flex-direction:row; align-items:center; gap:.35em;
    font-weight:700; background: rgba(23,20,27,.82); color:#fff;
    padding:.32em .6em; border-radius:50px; font-size:.82em; white-space:nowrap;
}
.ld-photo .ld-photo-label i { font-size: 1.1em; }
.ld-photo .ld-photo-num { font-size: 1em; }

/* ---- Vorlagen-Filter ---- */
.ld-filter { display:flex; gap:.35rem; padding:0 1rem .7rem; flex-wrap:wrap; }
.ld-filter button {
    font-size:.74rem; font-weight:600; padding:.34rem .72rem; border-radius:50px;
    border:1.5px solid var(--cream-line); background:var(--paper); color:var(--text-light); cursor:pointer;
    transition: all .15s ease;
}
.ld-filter button:hover { border-color:var(--coral); color:var(--coral); }
.ld-filter button.active { background:var(--coral); color:#fff; border-color:var(--coral); }

.ld-text { white-space: pre-wrap; line-height: 1.15; padding: 2px; }

/* resize handles */
.ld-handle {
    position: absolute; width: 12px; height: 12px; background: #fff;
    border: 2px solid var(--coral); border-radius: 50%;
    z-index: 1000; touch-action: none;
}
.ld-handle.br { right: -7px; bottom: -7px; cursor: nwse-resize; }
.ld-handle.tr { right: -7px; top: -7px; cursor: nesw-resize; }
.ld-handle.bl { left: -7px; bottom: -7px; cursor: nesw-resize; }
.ld-handle.tl { left: -7px; top: -7px; cursor: nwse-resize; }

.ld-format-bar { display:flex; gap:.4rem; flex-wrap:wrap; justify-content:center; }
.ld-fmt {
    font-size: .78rem; font-weight:600; padding:.4rem .8rem; border-radius:50px;
    border:1.5px solid var(--cream-line); background:var(--paper); color:var(--text-dark);
    cursor:pointer; transition: all .18s ease;
}
.ld-fmt.active { background: var(--ink); color:#fff; border-color: var(--ink); }
.ld-order-chip { display:inline-flex; align-items:center; gap:.35rem; font-size:.78rem; font-weight:600;
    padding:.4rem .8rem; border-radius:50px; background:var(--coral); color:#fff; white-space:nowrap; }
.ld-order-chip strong { font-weight:700; }
.ld-order-chip.is-test { background:rgba(23,20,27,.08); color:var(--text-dark); border:1px solid var(--cream-line); }
/* Chip lebt jetzt in der dunklen Topbar → heller Testmodus-Look statt dunkler Text */
.ld-topbar .ld-order-chip { margin-left:.6rem; }
.ld-topbar .ld-order-chip.is-test { background:rgba(255,255,255,.1); color:#fff; border:1px solid rgba(255,255,255,.18); }
@media(max-width:640px){ .ld-topbar .ld-order-chip { display:none; } }
/* Foto-Platzhalter-Info: unter dem "Foto-Platz"-Button im Bearbeiten-Panel */
.ld-photo-info { display:flex; align-items:flex-start; gap:.4rem; margin:0 1.1rem .2rem; padding:.5rem .7rem;
    font-size:.76rem; font-weight:600; line-height:1.35; color:var(--text-dark);
    background:rgba(23,20,27,.06); border:1px solid var(--cream-line); border-radius:10px; }
.ld-photo-info i { font-size:1rem; flex:none; margin-top:.05rem; color:var(--coral); }
.ld-mode-toggle { display:none; position:relative; gap:.3rem; background:#fff; border:1px solid var(--cream-line);
    border-radius:50px; padding:4px; }
.ld-mode-toggle.show { display:inline-flex; }
.ld-mode-toggle .ld-mode-slide { position:absolute; top:4px; bottom:4px; left:0; width:0;
    background:var(--coral); border-radius:50px; transform:translateX(0);
    transition:transform .28s cubic-bezier(.34,1.3,.5,1), width .28s cubic-bezier(.34,1.3,.5,1);
    pointer-events:none; z-index:0; }
.ld-mode-toggle button { position:relative; z-index:1; border:0; background:transparent; border-radius:50px;
    padding:6px 15px; font-size:.82rem; cursor:pointer; font-family:inherit; font-weight:600;
    color:var(--text-light); transition:color .2s ease; }
.ld-mode-toggle button.active { color:#fff; }
.ld-tbtn:disabled { opacity:.45; cursor:not-allowed; }
[hidden] { display:none !important; }

/* Bestellung-laden-Dialog */
.ld-modal { position:fixed; inset:0; z-index:6000; display:flex; align-items:center; justify-content:center;
    background:rgba(23,20,27,.55); padding:1rem; overflow-y:auto; }
.ld-modal[hidden] { display:none; }
.ld-modal-card { background:#fff; border-radius:18px; padding:1.6rem 1.5rem; max-width:420px; width:100%;
    position:relative; box-shadow:0 18px 50px rgba(0,0,0,.25);
    max-height:calc(100dvh - 2rem); overflow-y:auto; }
.ld-modal-card h3 { margin:0 0 .4rem; font-size:1.2rem; }
.ld-modal-card p { margin:0 0 1.1rem; font-size:.88rem; color:var(--text-light); line-height:1.45; }
.ld-modal-x { position:absolute; top:.5rem; right:.7rem; border:0; background:none; font-size:1.8rem;
    line-height:1; color:var(--text-light); cursor:pointer; padding:.1rem .3rem; }
.ld-modal-field { display:block; font-size:.82rem; font-weight:600; color:var(--text-dark); margin-bottom:.8rem; }
.ld-modal-field input { width:100%; margin-top:.3rem; padding:.6rem .7rem; border:1.5px solid var(--cream-line);
    border-radius:10px; font-size:.92rem; font-family:inherit; }
.ld-modal-field input:focus { outline:none; border-color:var(--coral); }
/* Input mit festem "BF-"-Präfix (Kunde tippt nur die Ziffern) */
.ld-input-prefix { display:flex; align-items:stretch; margin-top:.3rem; border:1.5px solid var(--cream-line);
    border-radius:10px; overflow:hidden; background:#fff; }
.ld-input-prefix:focus-within { border-color:var(--coral); }
.ld-input-prefix .ld-ip-tag { display:flex; align-items:center; padding:0 .15rem 0 .7rem; font-weight:700;
    color:var(--text-light); background:#faf7f1; user-select:none; }
.ld-input-prefix input { flex:1; margin:0; border:0; border-radius:0; padding:.6rem .7rem .6rem .25rem; }
.ld-input-prefix input:focus { outline:none; border:0; }
.ld-modal-err { display:block; background:#fdecea; color:#a01b0f; padding:.55rem .75rem; border-radius:8px;
    font-size:.82rem; font-weight:600; margin-bottom:.8rem; }
.ld-modal-err[hidden] { display:none; }
.ld-modal-submit { width:100%; justify-content:center; }
/* Format-Dropdown: ersetzt die 3 Buttons jetzt auf ALLEN Größen (Desktop + Mobile) */
.ld-fmt[data-fmt]{display:none}          /* Format-Buttons immer aus … */
.ld-fmt-select{display:inline-block;font-size:.78rem;font-weight:600;padding:.4rem 1.9rem .4rem .8rem;
    border-radius:50px;border:1.5px solid var(--cream-line);background:var(--paper);color:var(--text-dark);
    cursor:pointer;-webkit-appearance:none;appearance:none;
    background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='%2317141B'%3E%3Cpath d='M4 6l4 4 4-4'/%3E%3C/svg%3E");
    background-repeat:no-repeat;background-position:right .65rem center;background-size:12px}

/* ---- "powered by Botofox" (unten im Canvas-Bereich) ---- */
.ld-poweredby{
    margin-top: auto;                 /* an den unteren Rand schieben, Stage bleibt zentriert */
    display: inline-flex; align-items: center; gap: .4rem;
    padding-top: .4rem;
    font-size: .72rem; letter-spacing: .02em; color: var(--text-light);
    text-decoration: none; opacity: .7; transition: opacity .16s ease;
}
.ld-poweredby:hover{ opacity: 1; }
.ld-poweredby img{ height: 13px; width: auto; display: block; }

/* ---- Nav-Buttons im Bearbeiten-Panel (Bestellung / Startbildschirm) ---- */
.ld-nav-actions{display:flex;flex-direction:column;gap:.5rem;padding:.9rem 1.1rem;border-bottom:1px solid var(--cream-line)}
.ld-navbtn{
    display:flex;align-items:center;gap:.55rem;width:100%;
    padding:.7rem .9rem;border-radius:12px;border:1.5px solid var(--cream-line);
    background:var(--paper);color:var(--text-dark);font-family:var(--font-body);
    font-weight:600;font-size:.88rem;text-decoration:none;cursor:pointer;
    transition:background .16s ease,border-color .16s ease,transform .08s ease;
}
.ld-navbtn i{font-size:1.2rem;color:var(--coral)}
.ld-navbtn:hover{background:var(--paper-2);border-color:var(--coral)}
.ld-navbtn:active{transform:translateY(1px)}
.ld-navbtn[data-busy]{opacity:.7;pointer-events:none}

/* ---- Hilfslinien-Schalter (im Bearbeiten-Panel) ---- */
.ld-guides-row{
    display:flex;align-items:center;justify-content:space-between;gap:.8rem;
    padding:.9rem 1.1rem;border-bottom:1px solid var(--cream-line);
}
.ld-guides-text span{font-size:.9rem;font-weight:600;color:var(--text-dark);display:flex;align-items:center;gap:.4rem}
.ld-guides-text small{display:block;font-size:.74rem;color:var(--text-light);margin-top:.15rem}
.ld-switch{position:relative;flex:none;width:44px;height:26px;cursor:pointer}
.ld-switch input{position:absolute;opacity:0;width:0;height:0}
.ld-switch-track{
    position:absolute;inset:0;border-radius:50px;background:var(--cream-line);
    transition:background .22s ease;
}
.ld-switch-track::after{
    content:'';position:absolute;top:3px;left:3px;width:20px;height:20px;border-radius:50%;
    background:#fff;box-shadow:0 1px 3px rgba(23,20,27,.25);transition:transform .22s cubic-bezier(.4,0,.2,1);
}
.ld-switch input:checked + .ld-switch-track{background:var(--coral)}
.ld-switch input:checked + .ld-switch-track::after{transform:translateX(18px)}
.ld-switch input:focus-visible + .ld-switch-track{outline:2px solid var(--coral);outline-offset:2px}

/* ---- Right: properties ---- */
.ld-prop-group { padding: .9rem 1.1rem; border-bottom: 1px solid var(--cream-line); }
.ld-prop-group h4 { font-family:var(--font-display); font-weight:700; font-size:.9rem; color:var(--ink); margin-bottom:.7rem; display:flex; align-items:center; gap:.4rem; }
.ld-field { margin-bottom: .7rem; }
.ld-field label { display:block; font-size:.72rem; font-weight:600; text-transform:uppercase; letter-spacing:.05em; color:var(--text-light); margin-bottom:.3rem; }
.ld-field input[type=text], .ld-field textarea, .ld-field select, .ld-field input[type=number] {
    width:100%; padding:.55rem .7rem; border:1.5px solid var(--cream-line); border-radius:10px;
    font-family:var(--font-body); font-size:.9rem; background:#fff; color:var(--text-dark);
}
.ld-field textarea { resize: vertical; min-height: 56px; }
.ld-field input:focus, .ld-field textarea:focus, .ld-field select:focus { outline:none; border-color:var(--coral); box-shadow:0 0 0 3px rgba(108, 68, 228,.12); }
.ld-row2 { display:grid; grid-template-columns:1fr 1fr; gap:.6rem; }
.ld-color-row { display:flex; align-items:center; gap:.5rem; }
.ld-color-row input[type=color] { width:42px; height:38px; border:1.5px solid var(--cream-line); border-radius:10px; background:none; cursor:pointer; padding:2px; }
.ld-align-row { display:flex; gap:.3rem; }
.ld-align-row button { flex:1; padding:.5rem; border:1.5px solid var(--cream-line); background:#fff; border-radius:8px; cursor:pointer; color:var(--text-light); }
.ld-align-row button.active { background:var(--ink); color:#fff; border-color:var(--ink); }
.ld-addbtns { display:grid; grid-template-columns:1fr 1fr; gap:.5rem; padding:.9rem 1.1rem; }
.ld-addbtn {
    display:flex; flex-direction:column; align-items:center; gap:.3rem;
    padding:.8rem; border:1.5px dashed var(--cream-line); border-radius:12px; background:var(--paper);
    cursor:pointer; font-size:.8rem; font-weight:600; color:var(--text-dark); transition:all .18s ease;
}
.ld-addbtn:hover { border-color:var(--coral); color:var(--coral); }
.ld-addbtn i { font-size:1.4rem; }
.ld-danger { color:var(--coral); }
.ld-del-btn {
    width:100%; padding:.6rem; border:1.5px solid rgba(108, 68, 228,.4); background:rgba(108, 68, 228,.06);
    color:var(--coral); border-radius:10px; font-weight:600; cursor:pointer; display:flex; align-items:center; justify-content:center; gap:.4rem;
}
.ld-empty-hint { padding:1.4rem 1.1rem; color:var(--text-light); font-size:.85rem; line-height:1.5; text-align:center; }
.ld-empty-hint i { font-size:1.8rem; color:var(--cream-line); display:block; margin-bottom:.5rem; }

/* Mobile-Tabs (Desktop: ausgeblendet) */
.ld-mobile-tabs { display: none; }

/* mobile: kompakter Header + Canvas + Tab-Umschalter + ein Panel */
@media (max-width: 999px) {
    .ld-topbar { gap: .5rem; padding: .55rem .8rem; }
    .ld-topbar .ld-title { font-size: .95rem; line-height: 1.05; }
    .ld-topbar .ld-title small { display: none; }
    #ldName { display: none; }
    .hide-sm { display: none; }
    .ld-tbtn { padding: .55rem .8rem; font-size: .85rem; }
    .ld-tbtn i { font-size: 1.2rem; }

    .ld-workspace { display: flex; flex-direction: column; height: auto; }
    .ld-canvas-wrap { order: 0; min-height: 50vh; padding: 1rem; }

    .ld-mobile-tabs {
        order: 1; display: flex; position: sticky; top: 0; z-index: 40;
        background: var(--paper); border-bottom: 1px solid var(--cream-line);
        box-shadow: 0 2px 8px rgba(23,20,27,.05);
    }
    .ld-mobile-tabs button {
        flex: 1; padding: .85rem; border: none; background: none; cursor: pointer;
        font-family: var(--font-body); font-weight: 600; font-size: .92rem; color: var(--text-light);
        display: flex; align-items: center; justify-content: center; gap: .45rem;
        border-bottom: 2.5px solid transparent;
        transition: color .2s ease, border-bottom-color .2s ease;
    }
    .ld-mobile-tabs button i { font-size: 1.25rem; }
    .ld-mobile-tabs button.active { color: var(--coral); border-bottom-color: var(--coral); }

    .ld-panel { order: 2; max-height: none; border: none; overflow: visible; padding-bottom: 2rem; }
    .ld-panel h3 { display: none; }
    .ld-templates { grid-template-columns: repeat(3,1fr); }
    .ld-filter { padding-top: .8rem; }

    .ld-workspace[data-mtab="templates"] .ld-panel-r { display: none; }
    .ld-workspace[data-mtab="edit"] .ld-panel:not(.ld-panel-r) { display: none; }

    /* Smoother Wechsel Vorlagen ⇄ Bearbeiten: das jeweils sichtbar werdende
       Panel spielt beim display:none→sichtbar seine Entry-Animation neu ab.
       Richtung folgt der Tab-Position (Vorlagen links, Bearbeiten rechts). */
    .ld-workspace[data-mtab="templates"] .ld-panel:not(.ld-panel-r) { animation: ldPanelInL .26s ease both; }
    .ld-workspace[data-mtab="edit"] .ld-panel-r { animation: ldPanelInR .26s ease both; }
}

@keyframes ldPanelInL { from { opacity: 0; transform: translateX(-14px); } to { opacity: 1; transform: none; } }
@keyframes ldPanelInR { from { opacity: 0; transform: translateX(14px); }  to { opacity: 1; transform: none; } }
@media (prefers-reduced-motion: reduce) {
    .ld-workspace[data-mtab="templates"] .ld-panel:not(.ld-panel-r),
    .ld-workspace[data-mtab="edit"] .ld-panel-r { animation: none; }
}

@media (max-width: 460px) {
    .ld-templates { grid-template-columns: repeat(2,1fr); }
    .ld-topbar .ld-logo { height: 20px; }
}

/* toast */
.ld-toast {
    position: fixed; bottom: 22px; left: 50%; transform: translateX(-50%) translateY(16px);
    background: var(--ink); color:#fff; padding:.8rem 1.3rem; border-radius:50px;
    font-weight:600; font-size:.9rem; box-shadow:var(--shadow-lg); z-index:200;
    opacity:0; visibility:hidden; pointer-events:none;
    transition: transform .35s cubic-bezier(.4,0,.2,1), opacity .3s ease, visibility 0s linear .3s;
    display:flex; align-items:center; gap:.5rem;
}
.ld-toast.show { transform: translateX(-50%) translateY(0); opacity:1; visibility:visible; transition: transform .35s cubic-bezier(.4,0,.2,1), opacity .3s ease, visibility 0s; }
.ld-toast i { color: var(--gold); font-size:1.2rem; }

/* ---- Toggle (Seitenverhältnis sperren) ---- */
.ld-toggle {
    display:flex; align-items:center; gap:.55rem; cursor:pointer;
    padding:.6rem .75rem; margin-bottom:.7rem;
    border:1.5px solid var(--cream-line); border-radius:10px; background:var(--paper);
    font-size:.85rem; font-weight:600; color:var(--text-dark);
}
.ld-toggle input { width:18px; height:18px; accent-color:var(--coral); cursor:pointer; flex-shrink:0; }
.ld-toggle span { display:flex; align-items:center; gap:.35rem; }
.ld-toggle i { color:var(--coral); }

/* Spinner im Bestell-Speichern-Button */
@keyframes spin { to { transform: rotate(360deg); } }