@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 und 1/3 Seitenleiste */
:root{
  --primary:#5b21b6;
  --primary-soft:#f3edff;
  --ink:#111827;
  --text:#374151;
  --muted:#6b7280;
  --line:#e5e7eb;
  --line-soft:#f3f4f6;
  --bg:#f9fafb;
}
*{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:#fff;border-bottom:1px solid var(--line);box-shadow:0 1px 2px rgb(0 0 0 / .05)}
.top-row{display:flex;align-items:center;gap:40px;min-height:64px}
.logo{font:800 1.75rem/1 "Bricolage",system-ui,sans-serif;letter-spacing:-.03em;color:var(--primary);text-decoration:none}
.links{display:flex;gap:28px;overflow-x:auto;scrollbar-width:none}
.links::-webkit-scrollbar{display:none}
.links a{flex:none;padding:8px 0;color:var(--text);text-decoration:none}
.links a:hover{color:var(--primary)}
.links a[aria-current]{color:var(--primary);font-weight:600}

.intro{padding:40px 0 28px}
.intro h1{font-size:clamp(1.9rem,4vw,2.4rem);line-height:1.15;font-weight:900;letter-spacing:-.02em;color:var(--ink);margin:0}
.intro p{margin:.4em 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}
.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.875rem;line-height:1.2;font-weight:700;letter-spacing:-.015em;color:var(--ink);margin:.35em 0 .4em;text-wrap:pretty}
.panel h2 a{text-decoration:none}
.panel h2 a:hover{color:var(--primary)}
.panel article>p{margin:0 0 1em}
.panel figure{float:right;width:38%;margin:8px 0 16px 24px}
.panel figure img{width:100%;max-height:320px;object-fit:cover;border-radius:4px}
.panel figcaption{font-size:.75rem;line-height:1.4;color:#6b7280;padding-top:8px}
.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)}
.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}
.empty{padding:24px;margin:0}

.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(--primary);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:#c9b6ee;background:#faf8ff}
.row img{flex:none;width:80px;height:80px;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)}

.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:10px}
  .links{width:100%;gap:22px}
  .intro{padding:24px 0 18px}
  .panel article{padding:18px}
  .panel h2,.panel h1{font-size:1.5rem}
  .panel figure{width:42%;margin-left:14px}
}