/* Mein Hochzeits-Pinboard (includes/pinboard.php); Umschalter .jtd-todo-tabs im Child-Theme */
.jtd-pb-intro{color:var(--jtd-muted);margin:-8px 0 18px;max-width:70ch}

.pb-leiste{display:flex;flex-wrap:wrap;gap:8px 18px;align-items:center;margin-bottom:12px;font-size:14px;color:var(--jtd-ink)}
.pb-leiste label{display:flex;gap:6px;align-items:center;cursor:pointer;color:var(--jtd-muted)}
.pb-status{margin-left:auto;font-size:13px;color:var(--jtd-muted)}

/* Kork mit Holzrahmen */
.pb-kork{position:relative;border:14px solid #B98A5A;border-radius:12px;box-shadow:inset 0 0 0 2px #A47548,0 14px 34px -14px rgba(38,51,46,.45);
	background-color:#C9A06E;
	background-image:radial-gradient(rgba(90,55,25,.28) 1px,transparent 1.4px),radial-gradient(rgba(255,240,215,.35) 1px,transparent 1.6px),radial-gradient(rgba(120,75,35,.22) 1.2px,transparent 1.8px);
	background-size:7px 7px,11px 11px,17px 17px;background-position:0 0,3px 5px,8px 2px;padding:6px 0}
.pb-ebene{position:relative;padding:34px 22px 26px 92px;min-height:150px}
.pb-ebene+.pb-ebene{border-top:1px dashed rgba(70,45,20,.25)}
.pb-ebene.drueber{background:rgba(255,253,249,.18)}
/* Schnur wie auf der echten Pinnwand */
.pb-schnur{position:absolute;left:0;right:0;top:20px;height:2px;background:#E9DE9A;box-shadow:0 1px 1px rgba(60,40,20,.35);transform:rotate(-.4deg)}
.jtd-app-shell .pb-marke,.pb-marke{position:absolute;left:12px;top:30px;margin:0;display:grid;justify-items:center;gap:6px;width:70px;text-align:center}
.pb-marke em{display:inline-block;font:600 11px/1.3 Inter,system-ui,sans-serif;font-style:normal;letter-spacing:.02em;color:var(--jtd-ink);background:rgba(255,253,249,.88);border-radius:999px;padding:2px 8px;white-space:nowrap;box-shadow:0 1px 2px rgba(60,40,20,.25)}
.pb-marke span{display:grid;place-items:center;width:36px;height:36px;background:#FFFDF9;font:400 22px var(--jtd-font-serif,Georgia,serif);color:var(--jtd-ink);box-shadow:0 2px 4px rgba(60,40,20,.3);transform:rotate(-3deg)}
.pb-zettel-reihe{display:flex;flex-wrap:wrap;gap:22px 18px;align-items:flex-start}

/* Zettel */
.pb-zettel{position:relative;width:150px;min-height:110px;box-sizing:border-box;padding:20px 12px 34px;background:#FFFDF9;box-shadow:0 3px 8px rgba(60,40,20,.3);cursor:grab;transition:transform .15s,box-shadow .15s}
.pb-zettel:hover{box-shadow:0 8px 16px rgba(60,40,20,.35);z-index:2}
.pb-zettel.zieht{opacity:.5}
.pb-zettel p{margin:0;font:400 16px/1.3 var(--jtd-font-serif,Georgia,serif);color:var(--jtd-ink);word-wrap:break-word;overflow-wrap:anywhere;cursor:text;white-space:pre-line}
.pb-zettel.erledigt{opacity:.55}
.pb-zettel.erledigt p{text-decoration:line-through}
.pb-pin{position:absolute;left:50%;top:-6px;width:14px;height:14px;margin-left:-7px;border-radius:50%;box-shadow:inset -2px -2px 3px rgba(0,0,0,.25),1px 2px 3px rgba(0,0,0,.35)}
.pb-aktionen{position:absolute;left:6px;right:6px;bottom:6px;display:flex;gap:4px;justify-content:flex-end;opacity:.55;transition:opacity .15s}
.pb-zettel:hover .pb-aktionen,.pb-zettel:focus-within .pb-aktionen{opacity:1}
.pb-aktionen button{width:26px;height:26px;border-radius:50%;border:1px solid rgba(38,51,46,.18);background:rgba(255,255,255,.7);font-size:13px;line-height:1;color:var(--jtd-ink);cursor:pointer;padding:0}
.pb-aktionen button:disabled{opacity:.3;cursor:default}
.pb-aktionen .pb-haken{margin-left:auto}
.pb-aktionen .pb-haken[aria-pressed=true]{background:#3F7658;border-color:#3F7658;color:#fff}

/* Bearbeiten / neuer Zettel */
.pb-zettel.offen-bearb,.pb-form{cursor:default;width:190px;padding:20px 10px 10px;transform:none!important;z-index:3}
.pb-zettel textarea{width:100%;box-sizing:border-box;border:1px dashed rgba(38,51,46,.25);background:transparent;font:400 16px/1.3 var(--jtd-font-serif,Georgia,serif);color:var(--jtd-ink);padding:6px;resize:vertical}
.pb-farben{display:flex;gap:6px;margin:8px 0 4px}
.pb-farben button{width:22px;height:22px;border-radius:50%;border:1px solid rgba(38,51,46,.25);cursor:pointer;padding:0}
.pb-farben button.an{box-shadow:0 0 0 2px var(--jtd-sage-dark)}
.pb-knoepfe{display:flex;gap:8px;align-items:center;margin-top:8px}
.pb-knoepfe button{border:0;border-radius:999px;padding:7px 14px;font:600 13px Inter,sans-serif;background:var(--jtd-sage-dark);color:#fff;cursor:pointer}
.pb-knoepfe .pb-weg{background:none;color:var(--jtd-muted);padding:0;text-decoration:underline;font-weight:400}
.pb-neu{display:grid;place-items:center;gap:2px;width:150px;min-height:110px;border:2px dashed rgba(255,253,249,.75);background:rgba(255,253,249,.15);color:#FFFDF9;font:600 13px Inter,sans-serif;border-radius:4px;cursor:pointer;text-shadow:0 1px 2px rgba(60,40,20,.5)}
.pb-neu span{font-size:28px;line-height:1}
.pb-neu:hover{background:rgba(255,253,249,.3)}
.pb-neu:disabled{opacity:.4;cursor:default}

@media (max-width:600px){
	.pb-kork{border-width:8px}
	.pb-ebene{padding:64px 10px 18px}
	.jtd-app-shell .pb-marke,.pb-marke{left:10px;top:28px;grid-auto-flow:column;align-items:center;width:auto;gap:8px}
	.pb-marke span{width:28px;height:28px;font-size:17px}
	.pb-zettel-reihe{gap:16px 10px}
	.pb-zettel,.pb-neu{width:calc(50% - 5px);min-height:100px}
	.pb-zettel.offen-bearb,.pb-form{width:100%}
	.pb-zettel p{font-size:15px}
	.pb-aktionen{opacity:1}
}