/* ==========================================================================
   Landingpage Notes Helper – Vorführungen (agents/notes/landing-view.php)
   Nur Variablen aus tokens.css und landing.css, Klassenpräfix lpn-.

   Zettelfarben: Jede Farbklasse setzt nur den Farbton --lpn-h (aus den
   vorhandenen Tokens gemischt). Papier, Kante und Linien werden daraus mit
   --surface gemischt – dadurch passen sie sich hell und dunkel von selbst an,
   und der Text (--text) bleibt auf jedem Zettel gut lesbar.
   ========================================================================== */

/* ---------- Zettelfarben ---------- */
/* Gelb und Orange brauchen ein kräftigeres, helles Papier: in HSL aus den
   „soft“-Tönen gemischt, damit die Sättigung nicht wie bei Weiß verloren geht */
.lpn-c-yellow {
    --lpn-h: color-mix(in oklab, var(--lp-a) 84%, var(--c-success));
    --lpn-paper-x: color-mix(in hsl, var(--lp-a) 18%, color-mix(in hsl, var(--c-warning-soft) 85%, var(--c-success-soft)));
}
.lpn-c-blue   { --lpn-h: var(--c-primary); }
.lpn-c-green  { --lpn-h: var(--c-success); }
.lpn-c-pink   { --lpn-h: var(--lp-a2); }
.lpn-c-orange {
    --lpn-h: color-mix(in oklab, var(--c-warning) 78%, var(--c-danger));
    --lpn-paper-x: color-mix(in hsl, var(--lpn-h) 26%, var(--c-warning-soft));
}
.lpn-c-purple { --lpn-h: color-mix(in oklab, var(--c-primary) 55%, var(--lp-a2)); }

/* Schräglage je Zettel (wie in der App fest an der Nummer) */
.lpn-t0 { --lpn-rot: -1.8deg; }
.lpn-t1 { --lpn-rot: 1.2deg; }
.lpn-t2 { --lpn-rot: -0.6deg; }
.lpn-t3 { --lpn-rot: 2.1deg; }
.lpn-t4 { --lpn-rot: -1.2deg; }

/* ---------- Haftzettel ---------- */
.lpn-note, .lpn-editor {
    --lpn-paper: var(--lpn-paper-x, color-mix(in oklab, var(--lpn-h) 24%, var(--surface)));
    --lpn-line:  color-mix(in oklab, var(--lpn-h) 42%, transparent);
    background-color: var(--lpn-paper);
    background-image: linear-gradient(180deg, color-mix(in oklab, var(--lpn-h) 10%, transparent), transparent 45%);
    border: 1px solid color-mix(in oklab, var(--lpn-h) 32%, var(--border));
    color: var(--text);
}
.lpn-note {
    position: relative; display: flex; flex-direction: column; gap: 5px; min-width: 0;
    padding: 16px 12px 9px; border-radius: 4px 4px 18px 4px / 4px 4px 8px 4px;
    box-shadow: 0 14px 18px -16px var(--lp-shadow), 0 3px 5px -3px var(--lp-shadow);
    transform: rotate(var(--lpn-rot, 0deg)); transform-origin: 50% 4px;
    transition: transform .4s cubic-bezier(.3, 1.4, .5, 1), opacity .4s ease, filter .4s ease, background-color .45s ease, border-color .45s ease, box-shadow .3s ease;
}
.lpn-note:hover, .lpn-note.is-hover { --lpn-rot: 0deg; box-shadow: 0 20px 26px -18px var(--lp-shadow), 0 4px 8px -4px var(--lp-shadow); }

/* Nadel: grau, angepinnt rot */
.lpn-pin {
    position: absolute; top: -6px; left: 50%; width: 14px; height: 14px; margin-left: -7px; border-radius: 50%; z-index: 2;
    background: radial-gradient(circle at 34% 30%, var(--border) 0 16%, var(--text-3) 58%, var(--text-2) 100%);
    box-shadow: 0 3px 4px -1px var(--lp-shadow);
    transition: background .3s ease, transform .3s ease;
}
.lpn-pin::after { content: ""; position: absolute; left: 50%; top: 11px; width: 2px; height: 4px; margin-left: -1px; border-radius: 1px; background: var(--text-3); opacity: .6; }
.lpn-note.is-pinned .lpn-pin, .lpn-pin.is-red {
    background: radial-gradient(circle at 34% 30%, color-mix(in oklab, var(--c-danger) 35%, var(--surface)) 0 16%, var(--c-danger) 60%, color-mix(in oklab, var(--c-danger) 70%, var(--text)) 100%);
}

.lpn-meta { font-family: var(--font-mono); font-size: 10px; color: var(--text-2); line-height: 1.2; }
.lpn-title {
    font-size: var(--fs-sm); font-weight: 650; line-height: 1.3; padding-bottom: 5px;
    border-bottom: 1px dashed var(--lpn-line); overflow-wrap: anywhere;
}
.lpn-body {
    margin: 0; font-size: var(--fs-xs); line-height: 1.45; color: var(--text); overflow-wrap: anywhere;
    display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden;
}
.lpn-note mark { background: color-mix(in oklab, var(--c-warning) 34%, transparent); color: inherit; border-radius: 3px; padding: 0 2px; }
.lpn-foot { display: flex; justify-content: space-between; align-items: center; gap: 6px; margin-top: auto; padding-top: 3px; font-size: 10.5px; color: var(--text-2); }
.lpn-group { display: inline-flex; align-items: center; gap: 5px; min-width: 0; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; }
.lpn-group i { width: 7px; height: 7px; border-radius: 50%; background: var(--lpn-h); flex: none; transition: background .45s ease; }
.lpn-acts { display: inline-flex; align-items: center; gap: 6px; color: var(--text-2); flex: none; }
.lpn-act-trash { display: inline-grid; place-items: center; width: 18px; height: 18px; margin: -3px; border-radius: 5px; transition: background .2s ease, color .2s ease, transform .15s ease; }
.lpn-act-trash.is-pressed { transform: scale(.85); background: var(--c-danger-soft); color: var(--c-danger); }

/* Zustände für die Szenen */
.lpn-note.is-off { opacity: 0; transform: translate(-14px, -52px) rotate(-10deg) scale(1.08); }
.lpn-note.is-out { opacity: .22; filter: saturate(.25); transform: rotate(var(--lpn-rot, 0deg)) scale(.94); }
.lpn-note.is-trashed { opacity: 0; transform: translateY(80px) rotate(26deg) scale(.5); transition-duration: .55s; }

/* ---------- Pinnwand ---------- */
.lpn-board {
    display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 18px 12px; padding: 18px 12px 12px; border-radius: 12px;
    background-color: var(--surface-2); border: 1px solid var(--border);
    background-image: radial-gradient(color-mix(in oklab, var(--text-2) 24%, transparent) 1px, transparent 1.4px); background-size: 14px 14px;
}
.lpn-board.is-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.lpn-board.is-mini { gap: 16px 10px; padding: 16px 10px 10px; }
.lpn-board.is-mini .lpn-note { padding: 13px 10px 8px; }
.lpn-board.is-mini .lpn-title { font-size: var(--fs-xs); }
.lpn-board.is-mini .lpn-acts { display: none; }
.lpn-board.is-row { grid-template-columns: repeat(3, minmax(0, 1fr)); }

/* ---------- Werkzeugleiste, Suche, Chips ---------- */
.lpn-toolbar { display: flex; gap: 8px; align-items: center; }
.lpn-search {
    flex: 1; min-width: 0; display: flex; gap: 8px; align-items: center; height: 34px; padding: 0 12px; border-radius: 10px;
    border: 1px solid var(--border-strong); background: var(--surface); color: var(--text-2); font-size: var(--fs-xs); transition: border-color .25s ease, box-shadow .25s ease;
}
.lpn-search .icon { flex: none; }
.lpn-search-text { color: var(--text); overflow: hidden; white-space: nowrap; text-overflow: ellipsis; min-width: 0; }
.lpn-search-text:empty::before { content: attr(data-ph); color: var(--text-2); }
.lpn-search.is-filled, .lpn-search.is-focus { border-color: var(--lp-a); box-shadow: 0 0 0 3px var(--lp-a-soft); }
.lpn-newbtn {
    display: inline-flex; align-items: center; gap: 6px; height: 34px; padding: 0 12px; border-radius: 10px; flex: none;
    background: var(--lp-a); color: var(--lp-on-a); font-size: var(--fs-xs); font-weight: 600; white-space: nowrap; transition: transform .15s ease;
}
.lpn-newbtn.is-pressed { transform: scale(.93); }
.lpn-chips {
    /* Umbrechen statt Überlaufen: was nicht passt, verschwindet in der zweiten (verdeckten) Zeile */
    display: flex; flex-wrap: wrap; gap: 6px; height: 26px; overflow: hidden;
    mask-image: linear-gradient(90deg, black 88%, transparent); -webkit-mask-image: linear-gradient(90deg, black 88%, transparent);
}
.lpn-chip {
    display: inline-flex; align-items: center; gap: 6px; height: 26px; padding: 0 10px; border-radius: 99px; flex: none;
    font-size: 11px; font-weight: 600; white-space: nowrap; background: var(--surface); border: 1px solid var(--border); color: var(--text-2);
    transition: background .25s ease, color .25s ease, transform .15s ease;
}
.lpn-chip b { color: var(--text); font-weight: 650; }
.lpn-chip.is-active { background: var(--lp-ink); color: var(--bg); border-color: transparent; }
.lpn-chip.is-active b { color: var(--bg); }
.lpn-chip.is-pressed { transform: scale(.92); }
.lpn-dot {
    display: inline-block; width: 9px; height: 9px; border-radius: 50%; flex: none; background: var(--lpn-h);
    box-shadow: 0 0 0 2px color-mix(in oklab, var(--lpn-h) 22%, transparent); transition: background .35s ease, box-shadow .35s ease, transform .15s ease;
}
.lpn-dot.is-pressed { transform: scale(.75); }

/* Tasten */
.lpn-keys { display: inline-flex; align-items: center; gap: 3px; font-size: 11px; color: var(--text-2); }
.lpn-keys kbd, .lpn-quick kbd, .lpn-mini-keys kbd, .lpn-dict-hint kbd {
    display: inline-grid; place-items: center; min-width: 26px; height: 22px; padding: 0 6px; border-radius: 6px;
    font-family: var(--font-mono); font-size: 11px; line-height: 1; color: var(--text); background: var(--surface);
    border: 1px solid var(--border-strong); box-shadow: 0 2px 0 var(--border-strong); transition: transform .12s ease, box-shadow .12s ease, background .2s ease;
}
.lpn-keys.is-pressed kbd, kbd.lpn-esc.is-pressed { transform: translateY(2px); box-shadow: 0 0 0 var(--border-strong); background: var(--lp-a-soft); }

/* Zeiger: erst sichtbar, wenn die Szene läuft (im Ruhezustand stört er) */
.lpn-hero .lp-cursor, .lpn-colors .lp-cursor, .lpn-filter .lp-cursor, .lpn-dict .lp-cursor, .lpn-trash .lp-cursor {
    opacity: 0; transition: transform .7s cubic-bezier(.6, .05, .3, 1), opacity .3s ease;
}
.lpn-live .lp-cursor { opacity: 1; }

/* ---------- Hero ---------- */
.lpn-hero-win .lp-win-body { min-height: 410px; }
.lpn-hero { position: relative; display: flex; flex-direction: column; gap: 12px; }
.lpn-hero .lpn-note { min-height: 118px; }
.lpn-editor {
    position: absolute; left: 50%; top: 46px; width: min(88%, 380px); z-index: 4; display: flex; flex-direction: column; gap: 10px;
    padding: 22px 18px 14px; border-radius: 6px 6px 22px 6px / 6px 6px 10px 6px;
    box-shadow: 0 34px 60px -26px var(--lp-shadow), 0 8px 16px -8px var(--lp-shadow);
    opacity: 0; pointer-events: none; transform: translateX(-50%) scale(.55) rotate(-5deg);
    transition: transform .5s cubic-bezier(.3, 1.35, .5, 1), opacity .3s ease;
}
.lpn-editor.is-open { opacity: 1; transform: translateX(-50%) scale(1) rotate(-1deg); }
.lpn-editor.is-closing { opacity: 0; transform: translate(-70%, 30px) scale(.4) rotate(3deg); transition: transform .45s cubic-bezier(.6, 0, .4, 1), opacity .4s ease .1s; }
.lpn-editor.is-static { position: relative; left: auto; top: auto; width: auto; opacity: 1; pointer-events: auto; transform: rotate(-.6deg); }
.lpn-ed-title { font-size: var(--fs-sm); font-weight: 650; color: var(--text-2); padding-bottom: 7px; border-bottom: 1px dashed var(--lpn-line); }
.lpn-ed-title.is-filled { color: var(--text); font-size: var(--fs-md); }
.lpn-editor-text, .lpn-dict-text { margin: 0; min-height: 3em; font-size: var(--fs-sm); line-height: 1.55; }
.lpn-editor-text:empty::before { content: attr(data-ph); color: var(--text-2); }
.lpn-ed-foot { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.lpn-savebtn { margin-left: auto; }
.lpn-mic {
    width: 30px; height: 30px; flex: none; border-radius: 50%; display: grid; place-items: center;
    background: var(--surface); border: 1px solid var(--border-strong); color: var(--text); transition: background .25s ease, color .25s ease, transform .15s ease;
}
.lpn-mic.is-pressed { transform: scale(.9); }

/* ---------- Bühne ---------- */
.lpn-stage-win .lp-win-body { min-height: 400px; }
/* Die Grundszene ist relativ positioniert; ohne das hier würde inset: 14px sie nach rechts unten schieben */
.lpn-stage-win .lp-stage-scene.is-base { inset: auto; }
.lpn-widget { display: flex; flex-direction: column; gap: 12px; }
.lpn-widget-head { display: flex; align-items: center; gap: 10px; font-size: var(--fs-sm); }
.lpn-widget-icon { width: 30px; height: 30px; border-radius: 9px; display: grid; place-items: center; background: var(--lp-a-soft); color: var(--lp-a); border: 1px solid var(--lp-a-line); flex: none; }
.lpn-widget-link { margin-left: auto; font-size: 11px; font-weight: 600; color: var(--lp-a); white-space: nowrap; }
.lpn-quick {
    display: flex; align-items: center; gap: 8px; height: 40px; padding: 0 8px 0 12px; border-radius: 10px;
    border: 1px solid var(--lp-a); box-shadow: 0 0 0 3px var(--lp-a-soft); background: var(--surface); font-size: var(--fs-sm);
}
.lpn-quick-text { flex: 1; min-width: 0; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; }
.lpn-quick.is-mini { height: 36px; border-color: var(--border-strong); box-shadow: none; color: var(--text-2); font-size: var(--fs-xs); }
.lpn-quick.is-mini .icon { color: var(--lp-a); flex: none; }
.lpn-hint { display: flex; align-items: center; gap: 6px; margin: 0; font-size: var(--fs-xs); color: var(--text-2); }
.lpn-hint .icon { color: var(--c-success); flex: none; }

.lpn-split { display: grid; grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr); gap: 12px; align-items: center; }
.lpn-split + .lpn-split { margin-top: 18px; }
.lpn-raw { padding: 12px; border-radius: 10px; background: var(--surface); border: 1px solid var(--border-strong); font-size: var(--fs-xs); }
.lpn-raw small, .lpn-out small { display: block; margin-bottom: 8px; font-size: 10.5px; font-weight: 600; letter-spacing: .06em; text-transform: uppercase; color: var(--text-2); }
.lpn-raw p { margin: 0; line-height: 1.6; }
.lpn-raw-first { border-radius: 3px; padding: 0 2px; background: var(--lp-a-soft); box-shadow: inset 0 -2px 0 var(--lp-a); }
.lpn-arrow { color: var(--lp-a); display: grid; place-items: center; }
.lpn-out .lpn-note { margin-top: 8px; }

.lpn-gm-title { display: flex; align-items: center; gap: 8px; margin-bottom: 12px; font-size: var(--fs-sm); }
.lpn-gm-title .icon { color: var(--lp-a); }
.lpn-gm-list, .lpn-glist { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 8px; }
.lpn-gm-list li, .lpn-glist li {
    display: flex; align-items: center; gap: 10px; padding: 9px 12px; border-radius: 10px;
    background: var(--surface); border: 1px solid var(--border); font-size: var(--fs-sm);
}
.lpn-gm-list li span, .lpn-glist li span { flex: 1; min-width: 0; font-weight: 600; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; }
.lpn-gm-list li em, .lpn-glist li em { font-style: normal; font-size: 11px; color: var(--text-2); white-space: nowrap; }
.lpn-gm-list li > .icon { color: var(--text-2); flex: none; }
.lpn-gm-list li.is-new { border-style: dashed; border-color: var(--border-strong); }
.lpn-gm-list li.is-new span { font-weight: 400; color: var(--text-2); }
.lpn-gm-list .lpn-dot, .lpn-glist .lpn-dot { width: 16px; height: 16px; }
.lpn-dot.is-add { display: grid; place-items: center; width: 18px; height: 18px; background: var(--surface-2); color: var(--text-2); border: 1px solid var(--border-strong); box-shadow: none; }
.lpn-gm .lpn-hint { margin-top: 12px; }
.lpn-gm .lpn-hint .icon { color: var(--lp-a); }
.lpn-swatches { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 12px; }
.lpn-swatches span {
    display: inline-flex; align-items: center; gap: 6px; height: 26px; padding: 0 10px 0 8px; border-radius: 99px;
    background: var(--surface); border: 1px solid var(--border); font-size: 11px; font-weight: 600;
}
.lpn-s4 { display: flex; flex-direction: column; gap: 12px; }
.lpn-kpi {
    display: flex; align-items: center; gap: 10px; padding: 10px 12px; border-radius: 10px;
    background: var(--lp-a-soft); border: 1px solid var(--lp-a-line); font-size: var(--fs-xs); color: var(--text);
}
.lpn-kpi .icon { color: var(--lp-a); flex: none; }
.lpn-kpi b { margin-left: auto; font-size: var(--fs-md); color: var(--lp-a); }

/* Einlauf je Schritt: startet neu, sobald die Szene aktiv wird */
@keyframes lpn-in { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } }
@keyframes lpn-drop {
    0% { opacity: 0; transform: translateY(-34px) rotate(-9deg) scale(1.06); }
    70% { opacity: 1; transform: translateY(3px) rotate(calc(var(--lpn-rot, 0deg) * -1)); }
    100% { opacity: 1; transform: rotate(var(--lpn-rot, 0deg)); }
}
@keyframes lpn-type { from { clip-path: inset(0 100% 0 0); } to { clip-path: inset(0 0 0 0); } }
@keyframes lpn-flash { 0%, 100% { background: var(--lp-a-soft); } 50% { background: color-mix(in oklab, var(--lp-a) 30%, var(--surface)); } }
.lp-js [data-step="1"] .lpn-s1 .lpn-quick-text { animation: lpn-type 1.1s steps(22) both .3s; }
.lp-js [data-step="1"] .lpn-s1 .lpn-quick kbd { animation: lpn-in .3s both 1.4s; }
.lp-js [data-step="1"] .lpn-s1 .lpn-s1-new { animation: lpn-drop .6s both 1.7s; }
.lp-js [data-step="1"] .lpn-s1 .lpn-hint { animation: lpn-in .4s both 2.2s; }
.lp-js [data-step="2"] .lpn-s2 .lpn-raw-first { animation: lpn-flash .8s ease 2 .3s; }
.lp-js [data-step="2"] .lpn-s2 .lpn-split:first-child .lpn-out .lpn-note { animation: lpn-drop .6s both .9s; }
.lp-js [data-step="2"] .lpn-s2 .lpn-split.is-small .lpn-note { animation: lpn-drop .6s both 1.6s; }
.lp-js [data-step="3"] .lpn-s3 .lpn-gm-list li { animation: lpn-in .45s both; animation-delay: calc(var(--d) * 260ms + 200ms); }
.lp-js [data-step="3"] .lpn-s3 .lpn-swatches span { animation: lpn-in .35s both; animation-delay: calc(var(--d) * 120ms + 1300ms); }
.lp-js [data-step="4"] .lpn-s4 .lpn-search-text { animation: lpn-type .6s steps(5) both .3s; }
.lp-js [data-step="4"] .lpn-s4 .lpn-note { animation: lpn-drop .55s both 1s; }
.lp-js [data-step="4"] .lpn-s4 .lpn-note + .lpn-note { animation-delay: 1.25s; }
.lp-js [data-step="4"] .lpn-s4 .lpn-kpi { animation: lpn-in .45s both 1.8s; }

/* ---------- Gruppen und Farben ---------- */
.lpn-colors { position: relative; display: grid; grid-template-columns: minmax(0, .85fr) minmax(0, 1.15fr); gap: 16px; align-items: start; min-height: 280px; }
.lpn-glist li.is-cycle { border-color: var(--lp-a-line); box-shadow: 0 8px 20px -14px var(--lp-glow); }
.lpn-colorname { transition: opacity .2s ease; }

/* ---------- Suche und Filter ---------- */
.lpn-filter { position: relative; display: flex; flex-direction: column; gap: 12px; min-height: 330px; }
.lpn-hits { flex: none; transition: opacity .25s ease; }
.lpn-hits.is-hidden { opacity: 0; }

/* ---------- Diktieren ---------- */
.lpn-dict { position: relative; min-height: 290px; padding: 8px 4px 50px; }
.lpn-wave { display: flex; align-items: center; gap: 10px; max-height: 0; opacity: 0; overflow: hidden; font-size: 11px; font-weight: 600; color: var(--c-danger); transition: max-height .3s ease, opacity .3s ease; }
.lpn-wave-bars { display: inline-flex; align-items: center; gap: 3px; height: 18px; }
.lpn-wave-bars i { width: 3px; height: 100%; border-radius: 2px; background: var(--c-danger); transform: scaleY(.3); }
.lpn-dict.is-rec .lpn-wave { max-height: 24px; opacity: 1; }
.lpn-dict.is-rec .lpn-wave-bars i { animation: lpn-wave .8s ease-in-out infinite; }
.lpn-wave-bars i:nth-child(2) { animation-delay: -.1s; }
.lpn-wave-bars i:nth-child(3) { animation-delay: -.35s; }
.lpn-wave-bars i:nth-child(4) { animation-delay: -.2s; }
.lpn-wave-bars i:nth-child(5) { animation-delay: -.55s; }
.lpn-wave-bars i:nth-child(6) { animation-delay: -.15s; }
.lpn-wave-bars i:nth-child(7) { animation-delay: -.45s; }
.lpn-wave-bars i:nth-child(8) { animation-delay: -.3s; }
.lpn-wave-bars i:nth-child(9) { animation-delay: -.6s; }
@keyframes lpn-wave { 50% { transform: scaleY(1); } }
.lpn-dict.is-rec .lpn-mic { background: var(--c-danger); color: var(--surface); border-color: transparent; animation: lpn-ring 1.2s ease-out infinite; }
@keyframes lpn-ring { from { box-shadow: 0 0 0 0 var(--c-danger-soft); } to { box-shadow: 0 0 0 10px transparent; } }
.lpn-dict-text.is-typing::after { content: ""; display: inline-block; width: 2px; height: 1em; margin-left: 2px; vertical-align: -2px; background: var(--lpn-h); animation: lp-caret .8s steps(1) infinite; }
.lpn-sel {
    display: inline-flex; align-items: center; gap: 6px; height: 28px; padding: 0 10px; border-radius: 8px; white-space: nowrap;
    background: var(--surface); border: 1px solid var(--border); font-size: 11px; font-weight: 600; color: var(--text);
}
.lpn-sel.is-on { color: var(--c-danger); border-color: color-mix(in oklab, var(--c-danger) 35%, var(--border)); }
.lpn-dict-hint { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin: 16px 0 0; font-size: var(--fs-xs); color: var(--text-2); }

/* ---------- Papierkorb ---------- */
.lpn-trash { position: relative; display: flex; flex-direction: column; gap: 14px; min-height: 300px; padding-bottom: 50px; }
.lpn-trash .lpn-note { min-height: 120px; }
.lpn-bin {
    display: flex; align-items: center; gap: 8px; flex-wrap: wrap; padding: 10px 12px; border-radius: 10px;
    background: var(--surface-2); border: 1px dashed var(--border-strong); font-size: var(--fs-xs); color: var(--text-2);
}
.lpn-bin strong { color: var(--text); }
.lpn-bin b { display: inline-grid; place-items: center; min-width: 22px; height: 20px; padding: 0 6px; border-radius: 99px; background: var(--lp-ink); color: var(--bg); font-size: 11px; }
.lpn-bin b.is-bump { animation: lpn-bump .45s ease; }
.lpn-bin span { margin-left: auto; }
@keyframes lpn-bump { 40% { transform: scale(1.35); } }
.lpn-trash .lp-toast b { cursor: default; border-radius: 6px; padding: 2px 4px; transition: background .2s ease; }
.lpn-trash .lp-toast b.is-pressed { background: color-mix(in oklab, var(--bg) 20%, transparent); }

/* ---------- Mini-Demos im Raster ---------- */
.lpn-mini-widget { display: flex; flex-direction: column; gap: 12px; }
.lpn-mini-keys { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.lpn-kpi.is-mini { padding: 8px 12px; }
.lpn-tiltdemo { display: flex; gap: 14px; padding: 12px 4px 4px; }
.lpn-tiltdemo .lpn-note { flex: 1; }
.lpn-tiltdemo .lpn-acts { display: none; }
.lpn-tiltdemo:hover .lpn-note { --lpn-rot: 0deg; }
.lpn-owner { display: flex; flex-wrap: wrap; gap: 8px; }
.lpn-owner .lp-pill .icon { color: var(--lp-a); }

/* ---------- Zusammenspiel: nur zwei Verbindungen, darum niedriger ---------- */
@media (min-width: 901px) {
    .lpn-net .lp-network { height: 360px; }
}

/* ---------- Schmale Bildschirme ---------- */
@media (max-width: 640px) {
    .lpn-board { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .lpn-board.is-row { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .lpn-board.is-row .lpn-note:nth-child(n+3) { display: none; }
    .lpn-hero .lpn-board .lpn-note:nth-child(5) { display: none; }
    .lpn-hero-win .lp-win-body { min-height: 380px; }
    .lpn-hero .lpn-note { min-height: 108px; }
    .lpn-editor { width: 92%; top: 40px; }
    .lpn-colors { grid-template-columns: 1fr; }
    .lpn-stage-win .lp-win-body { min-height: 0; }
    .lpn-split.is-small, .lpn-swatches, .lpn-s4 .lpn-kpi, .lpn-s3 .lpn-hint { display: none; }
    .lpn-split { gap: 8px; }
    .lpn-gm-list li { padding: 8px 10px; }
    .lpn-bin span { margin-left: 0; flex-basis: 100%; }
    .lpn-dict-hint span { flex-basis: 100%; }
    .lpn-acts .icon:not(:last-child) { display: none; }
}

@media (prefers-reduced-motion: reduce) {
    .lpn-note, .lpn-editor, .lpn-pin, .lpn-dot, .lpn-chip, .lpn-group i, .lpn-search, .lpn-newbtn, .lpn-mic, .lpn-wave, .lpn-hits,
    .lpn-keys kbd, .lpn-bin b, .lpn-colorname, .lpn-act-trash,
    .lpn-quick-text, .lpn-quick kbd, .lpn-hint, .lpn-raw-first, .lpn-gm-list li, .lpn-swatches span, .lpn-kpi, .lpn-search-text, .lpn-wave-bars i {
        animation: none !important; transition: none !important;
    }
}