/* Ideen-Seite: Masonry im Pinterest-Stil, Bild zuerst */
.masonry { columns: 4 250px; column-gap: 18px; }
.pin-card { break-inside: avoid; margin: 0 0 18px; display: inline-block; width: 100%; border-radius: 20px; overflow: hidden; background: var(--card); border: 1px solid var(--line); transition: transform .2s, border-color .2s, box-shadow .2s; }
.pin-card:hover { transform: translateY(-4px); border-color: rgba(255, 117, 24, .5); box-shadow: 0 16px 40px rgba(0, 0, 0, .4); }
.pin-media { position: relative; display: block; width: 100%; overflow: hidden; background: linear-gradient(160deg, #3a1d5e, #1c1030); color: var(--bone); text-decoration: none; }
.pin-media img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; opacity: 0; transition: opacity .6s ease, transform .6s ease; }
.pin-media img.loaded { opacity: 1; }
.pin-card:hover .pin-media img.loaded { transform: scale(1.04); }
.pin-media::after { content: "📌 Pinterest"; position: absolute; right: 10px; bottom: 10px; padding: 3px 10px; border-radius: 999px; background: rgba(20, 11, 36, .78); font-size: .75rem; font-weight: 600; opacity: 0; transition: opacity .3s; }
.pin-media.has-img::after { opacity: 1; }
.pin-placeholder { position: absolute; inset: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 8px; padding: 16px; text-align: center;
  background: radial-gradient(circle at 50% 45%, rgba(255, 117, 24, .22), transparent 60%); transition: opacity .4s; }
.pin-media.has-img .pin-placeholder { opacity: 0; pointer-events: none; }
.pin-ph-emoji { font-size: 3rem; filter: drop-shadow(0 0 16px rgba(255, 140, 30, .6)); }
.pin-ph-title { font-family: var(--font-spooky); color: var(--pumpkin); font-size: 1.5rem; line-height: 1.05; }
.pin-ph-hint { margin-top: 6px; padding: 7px 14px; border-radius: 999px; border: 1px solid rgba(255, 194, 61, .45); color: var(--glow); font-weight: 600; font-size: .85rem; cursor: pointer; }
.pin-media.loading .pin-ph-hint { visibility: hidden; }
.pin-media.loading .pin-ph-emoji { animation: bob 1.6s ease-in-out infinite; }
@keyframes bob { 50% { transform: translateY(-8px); } }
.pin-body { padding: 14px 16px 16px; display: flex; flex-direction: column; gap: 8px; }
.pin-body h3 { margin: 0; font-size: 1.1rem; }
.pin-body p { margin: 0; color: #d9cbe6; font-size: .9rem; line-height: 1.45; display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; }
.pin-card:hover .pin-body p { -webkit-line-clamp: unset; }
.pin-meta { display: flex; flex-wrap: wrap; gap: 6px; }
.pin-src { font-size: .8rem; color: var(--muted); text-decoration: none; }
a.pin-src:hover { color: var(--glow); }

.pin-consent { display: flex; align-items: center; gap: 16px; flex-wrap: wrap; margin: 0 0 22px; padding: 16px 20px; border-radius: 18px;
  background: linear-gradient(120deg, rgba(255, 117, 24, .16), rgba(36, 19, 60, .85)); border: 1px solid rgba(255, 194, 61, .4); }
.pin-consent[hidden] { display: none; }
.pin-consent p { margin: 0; flex: 1 1 260px; }
.pin-consent-ico { font-size: 2rem; }
@media (max-width: 560px) { .masonry { columns: 2 150px; column-gap: 12px; } .pin-card { margin-bottom: 12px; border-radius: 16px; } .pin-body { padding: 10px 12px 12px; } .pin-body p { -webkit-line-clamp: 2; font-size: .85rem; } .pin-ph-title { font-size: 1.15rem; } .pin-src:first-of-type { display: none; } }
@media (max-width: 560px) {
  .filter-bar { flex-wrap: nowrap; overflow-x: auto; scrollbar-width: none; margin-inline: -16px; padding: 0 16px 4px; }
  .filter-bar::-webkit-scrollbar { display: none; }
  .filter-bar button { flex: none; }
  .pin-meta .tag:nth-child(2) { display: none; }
}