@font-face{font-family:"Bricolage";src:url(fonts/bricolage-grotesque-latin-wght-normal.woff2) format("woff2");font-weight:200 800;font-display:swap}
@font-face{font-family:"Onest";src:url(fonts/onest-latin-wght-normal.woff2) format("woff2");font-weight:100 900;font-display:swap}
@font-face{font-family:"Onest";src:url(fonts/onest-latin-ext-wght-normal.woff2) format("woff2");font-weight:100 900;font-display:swap;unicode-range:U+0100-02AF,U+1E00-1EFF,U+2020,U+20A0-20C0}

/* Aufbau wie citybeat: Navigation, darunter 2/3 Inhalt (chronologisch) und 1/3 Seitenleiste */
:root{
  --primary:#c2185b;
  --primary-soft:#fde7f0;
  --night:#1e0b36;
  --ink:#111827;
  --text:#374151;
  --muted:#6b7280;
  --line:#e5e7eb;
  --line-soft:#f3f4f6;
  --bg:#f8f7fa;
}
*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{margin:0;background:var(--bg);color:var(--text);font:400 1.0625rem/1.6 "Onest",system-ui,sans-serif}
img{display:block;max-width:100%;height:auto}
a{color:inherit}
a:focus-visible{outline:3px solid var(--primary);outline-offset:2px;border-radius:4px}
.wrap{max-width:1280px;margin:0 auto;padding:0 16px}

.top{background:var(--night);color:#fff}
.top-row{display:flex;align-items:center;gap:40px;min-height:64px}
.logo{display:flex;align-items:center;gap:10px;font:800 1.7rem/1 "Bricolage",system-ui,sans-serif;letter-spacing:-.03em;color:#fff;text-decoration:none}
.logo svg{width:34px;height:22px;color:#ff3d8b}
.links{display:flex;gap:26px;overflow-x:auto;scrollbar-width:none}
.links::-webkit-scrollbar{display:none}
.links a{flex:none;padding:20px 0 18px;color:#ddd2ee;text-decoration:none;border-bottom:3px solid transparent}
.links a:hover{color:#fff}
.links a[aria-current]{color:#fff;font-weight:600;border-bottom-color:#ff3d8b}

.intro{padding:36px 0 24px}
.intro h1{font:800 clamp(1.9rem,4vw,2.5rem)/1.12 "Bricolage",system-ui,sans-serif;letter-spacing:-.025em;color:var(--ink);margin:0}
.intro p{margin:.45em 0 0;color:#4b5563;max-width:48rem}

.columns{display:flex;gap:32px;align-items:flex-start;padding-bottom:40px}
.columns:first-child{padding-top:32px}
.left{flex:0 0 calc((100% - 32px) * 2 / 3);min-width:0;display:flex;flex-direction:column;gap:24px}
.right{flex:1;min-width:0;display:flex;flex-direction:column;gap:24px}

.panel{background:#fff;border:1px solid var(--line);border-radius:8px;box-shadow:0 1px 2px rgb(0 0 0 / .05);overflow:hidden}
.panel article{padding:24px;display:flow-root}
.panel article+article{border-top:1px solid var(--line-soft)}
.panel h2,.panel h1{font-size:1.75rem;line-height:1.2;font-weight:700;letter-spacing:-.015em;color:var(--ink);margin:.3em 0 .45em;text-wrap:pretty}
.panel h2 a{text-decoration:none}
.panel h2 a:hover{color:var(--primary)}
.panel article>p{margin:0 0 1em}
.meta{display:flex;flex-wrap:wrap;gap:6px;margin:0}
.media{float:right;width:38%;margin:6px 0 16px 24px}
.media img{width:100%;max-height:300px;object-fit:cover;border-radius:6px}
.media figcaption{font-size:.75rem;line-height:1.4;color:var(--muted);padding-top:8px}
.media figcaption a{text-decoration:none}
.video{float:none;width:100%;margin:4px 0 16px}
.frame{position:relative;aspect-ratio:16/9;border-radius:8px;overflow:hidden;background:#000}
.frame iframe{position:absolute;inset:0;width:100%;height:100%;border:0}
.poster{aspect-ratio:4/3;border-radius:6px;display:flex;align-items:flex-end;padding:14px;overflow:hidden;
  background:radial-gradient(120% 90% at 100% 0,#ff3d8b 0,transparent 60%),linear-gradient(160deg,#3b1670,var(--night))}
.poster-int{background:radial-gradient(120% 90% at 100% 0,#22d3ee 0,transparent 60%),linear-gradient(160deg,#1e3a8a,#0b1736)}
.poster span{font:800 clamp(1.1rem,2.4vw,1.6rem)/1.05 "Bricolage",system-ui,sans-serif;color:#fff;letter-spacing:-.02em;overflow-wrap:anywhere}
.more{color:var(--primary);font-size:.95rem;font-weight:600;text-decoration:none}
.more:hover{text-decoration:underline}
.art-foot{clear:both;display:flex;flex-wrap:wrap;gap:4px 14px;margin-top:16px;padding-top:12px;border-top:1px solid var(--line-soft);font-size:.8rem;color:var(--muted)}
.art-foot a{text-decoration:none}
.art-foot a:hover{color:var(--primary)}
.art-foot .tag{color:var(--ink);font-weight:600}
.pill{display:inline-block;border-radius:999px;background:var(--primary-soft);color:var(--primary);font-size:.75rem;font-weight:600;line-height:1.5;padding:1px 9px}
.pill-rumor{background:#fef3c7;color:#78350f}
.pill-own{background:#ede9fe;color:#5b21b6}
.empty{padding:24px;margin:0}
.panel-head{margin:0!important;padding:14px 24px;font-size:1.1rem!important;border-bottom:1px solid var(--line-soft)}
.rel{display:block;padding:12px 24px;text-decoration:none;border-top:1px solid var(--line-soft)}
.rel:hover .row-title{color:var(--primary)}
.pager{display:flex;justify-content:space-between;align-items:center;font-size:.95rem;color:var(--muted)}
.pager a{color:var(--primary);font-weight:600;text-decoration:none}

.creator-head{display:flex;gap:20px;align-items:center}
.creator-head img{flex:none;width:96px;height:96px;border-radius:50%;object-fit:cover}
.accounts{display:flex;flex-wrap:wrap;gap:8px;margin-top:12px!important}
.acc{border:1px solid var(--line);background:#fff;border-radius:999px;padding:3px 12px;font-size:.85rem;font-weight:600;text-decoration:none}
.acc:hover{border-color:var(--primary);color:var(--primary)}
.acc small{color:var(--muted);font-weight:500}
.credit{font-size:.72rem;color:var(--muted)}
.credit a{text-decoration:none}
.dir-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(210px,1fr));gap:10px;padding:16px}
.dir-card{display:flex;flex-direction:column;gap:2px;padding:12px 14px;border:1px solid var(--line-soft);border-radius:8px;text-decoration:none}
.dir-card:hover{border-color:#f3b4cf;background:#fff8fb}
.dir-name{font-weight:700;color:var(--ink)}
.dir-meta{font-size:.8rem;color:var(--muted);line-height:1.35}
.dir-meta b{color:var(--primary)}
.prose article h2{font-size:1.25rem;margin-top:1.2em}

.box{background:#fff;border:1px solid var(--line);border-radius:8px;box-shadow:0 1px 2px rgb(0 0 0 / .05);overflow:hidden}
.box h2{margin:0;padding:12px 20px;background:var(--night);color:#fff;font-size:1rem;font-weight:700}
.box-list{padding:12px;display:grid;gap:8px}
.row{display:flex;gap:12px;align-items:center;padding:10px;border:1px solid var(--line-soft);border-radius:8px;text-decoration:none}
.row:hover{border-color:#f3b4cf;background:#fff8fb}
.row img{flex:none;width:72px;height:72px;object-fit:cover;border-radius:8px}
.row-text{display:block;min-width:0}
.row-meta{display:block;font-size:.75rem;font-weight:600;color:var(--muted)}
.row-title{display:block;margin-top:3px;font-size:.95rem;font-weight:600;line-height:1.3;color:var(--ink)}
.row:hover .row-title{color:var(--primary)}
.chips{display:flex;flex-wrap:wrap;gap:8px;padding:14px}
.chips a{border-radius:999px;background:var(--primary-soft);color:var(--primary);padding:3px 11px;font-size:.88rem;font-weight:600;text-decoration:none}
.chips a:hover{background:var(--primary);color:#fff}
.chips small{opacity:.7}
.fresh{list-style:none;margin:0;padding:6px 0}
.fresh a{display:block;padding:9px 20px;text-decoration:none}
.fresh a:hover .fresh-title{color:var(--primary)}
.fresh-title{display:block;font-size:.92rem;line-height:1.3;color:var(--ink);margin-top:2px}
.dot{display:inline-block;width:8px;height:8px;border-radius:50%;margin-right:6px;background:#9ca3af}
.dot-youtube{background:#ef4444}.dot-instagram{background:#d946ef}.dot-bluesky{background:#0ea5e9}
.box-info p{margin:0;padding:14px 20px;font-size:.92rem}
.box-info a{color:var(--primary);font-weight:600}

.foot{background:#fff;border-top:1px solid var(--line);padding:24px 0;font-size:.875rem;color:var(--muted)}
.foot p{margin:0 0 .5em;max-width:48rem}
.legal{display:flex;flex-wrap:wrap;gap:4px 18px}

@media (max-width:1023px){
  .columns{flex-direction:column}
  .left,.right{flex:none;width:100%}
}
@media (max-width:640px){
  .top-row{flex-direction:column;align-items:flex-start;gap:0;padding-top:12px}
  .links{width:100%;gap:22px}
  .links a{padding:12px 0 10px}
  .intro{padding:24px 0 18px}
  .panel article{padding:18px}
  .panel h2,.panel h1{font-size:1.45rem}
  .media{width:42%;margin-left:14px}
  .video{width:100%;margin-left:0}
}