:root{
  --bg:#f7f5f1;
  --surface:#ffffff;
  --ink:#1d2733;
  --muted:#5b6776;
  --line:#e4ded4;
  --accent:#9e2b25;        /* tiefes Rot – China-Bezug, sachlich */
  --accent-soft:#f3e7e4;
  --hl:#1a5fb4;           /* Blau – Highlight-Farbe (zuvor erdgelbes Gold) */
  --shadow:0 1px 3px rgba(0,0,0,.06),0 8px 24px rgba(0,0,0,.05);
  --radius:14px;
}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{
  margin:0;
  font-family:"Segoe UI",Roboto,"Helvetica Neue","PingFang SC","Microsoft YaHei",sans-serif;
  color:var(--ink);
  background:var(--bg);
  line-height:1.65;
  -webkit-font-smoothing:antialiased;
}
.wrap{max-width:1080px;margin:0 auto;padding:0 22px}

/* Header */
.site-header{background:#22272e;color:#fff;padding:18px 0}
.site-header .wrap{display:flex;align-items:center;justify-content:space-between;gap:16px;flex-wrap:wrap}
.brand{display:flex;flex-direction:column;line-height:1.1}
.brand-cn{font-size:1.5rem;font-weight:700;letter-spacing:.06em}
.brand-de{font-size:.82rem;color:#c9b78f;letter-spacing:.04em}
.tagline{margin:0;color:#aeb6c0;font-size:.85rem;flex:1 1 240px}
.lang-switch{display:flex;border:1px solid #3a424c;border-radius:999px;overflow:hidden}
.lang-switch button{
  background:transparent;color:#cfd6de;border:0;padding:7px 16px;cursor:pointer;font-size:.85rem;
}
.lang-switch button.active{background:var(--accent);color:#fff}

/* Hero */
.hero{padding:46px 0 30px;background:linear-gradient(180deg,#fbf9f5,var(--bg))}
.hero h1{font-size:2rem;margin:0 0 14px;line-height:1.25}
.lead{font-size:1.05rem;color:var(--muted);max-width:880px;margin:0 0 22px}
.lead strong{color:var(--ink)}
.stats{display:flex;gap:26px;flex-wrap:wrap}
.stats .stat{display:flex;flex-direction:column}
.stats .num{font-size:1.9rem;font-weight:700;color:var(--accent)}
.stats .lab{font-size:.8rem;color:var(--muted);text-transform:uppercase;letter-spacing:.05em}

/* Controls */
.controls{padding:22px 0;background:var(--bg);position:sticky;top:0;z-index:5;border-bottom:1px solid var(--line)}
.search-box input{
  width:100%;padding:13px 16px;font-size:1rem;border:1px solid var(--line);border-radius:999px;
  background:var(--surface);color:var(--ink);box-shadow:var(--shadow);outline:none;
}
.search-box input:focus{border-color:var(--accent)}
.filters{display:flex;gap:14px;flex-wrap:wrap;margin-top:14px}
.filters label{font-size:.82rem;color:var(--muted);display:flex;flex-direction:column;gap:4px;flex:1 1 160px}
.filters select{padding:9px 10px;border:1px solid var(--line);border-radius:10px;background:var(--surface);color:var(--ink);font-size:.92rem}

/* Highlights */
.highlights{padding:30px 0 8px;background:linear-gradient(180deg,var(--bg),#fcfbf8);border-bottom:1px solid var(--line)}
.section-title{font-size:1.45rem;margin:0 0 4px;letter-spacing:.01em}
.section-sub{color:var(--muted);margin:0 0 18px;font-size:.92rem;max-width:760px}
.hl-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(320px,1fr));gap:18px}
.card.hl{border-color:var(--hl);background:linear-gradient(180deg,#f4f8fd,var(--surface));position:relative}
.card.hl .badge{position:absolute;top:13px;right:13px;font-size:.68rem;letter-spacing:.03em;background:var(--hl);color:#fff;padding:3px 9px;border-radius:999px;font-weight:600}
.card.hl:hover{transform:translateY(-3px);border-color:var(--hl);box-shadow:0 10px 30px rgba(26,95,180,.18)}

/* Grid */
main{padding:26px 0 50px}
main .section-title{margin:6px 0 14px}
.list-block{margin-bottom:34px}
.list-block:last-child{margin-bottom:0}
.result-count{color:var(--muted);font-size:.88rem;margin:6px 0 18px}
.grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(310px,1fr));gap:18px}
.card{
  background:var(--surface);border:1px solid var(--line);border-radius:var(--radius);
  padding:18px 18px 16px;box-shadow:var(--shadow);cursor:pointer;transition:transform .15s,box-shadow .15s,border-color .15s;
  display:flex;flex-direction:column;gap:8px;
}
.card:hover{transform:translateY(-3px);border-color:var(--accent);box-shadow:0 10px 30px rgba(0,0,0,.09)}
.card .tag{display:inline-block;font-size:.7rem;letter-spacing:.04em;text-transform:uppercase;
  background:var(--accent-soft);color:var(--accent);padding:3px 9px;border-radius:999px;align-self:flex-start}
.card .tag.cat{text-transform:none;background:#eef2f7;color:#5b6b7e}
.card h3{font-size:1.05rem;margin:2px 0 0;line-height:1.35}
.card .meta{font-size:.82rem;color:var(--muted);margin-top:auto}
.card .meta b{color:var(--ink);font-weight:600}

.empty{text-align:center;color:var(--muted);padding:40px 0}

/* Modal */
.modal{position:fixed;inset:0;z-index:50;display:flex;align-items:flex-start;justify-content:center;padding:40px 16px;overflow:auto}
.modal[hidden]{display:none}
.modal-backdrop{position:fixed;inset:0;background:rgba(20,24,30,.55);backdrop-filter:blur(2px)}
.modal-card{position:relative;background:var(--surface);border-radius:18px;max-width:840px;width:100%;
  padding:30px 32px;box-shadow:0 20px 60px rgba(0,0,0,.25);animation:pop .18s ease}
@keyframes pop{from{transform:translateY(12px);opacity:0}to{transform:none;opacity:1}}
.modal-close{position:absolute;top:14px;right:16px;border:0;background:transparent;font-size:1.7rem;line-height:1;color:var(--muted);cursor:pointer}
.modal h2{margin:0 0 4px;font-size:1.35rem;line-height:1.3}
.modal .sub{color:var(--muted);font-size:.86rem;margin:0 0 16px}
.modal .sub a{color:var(--accent)}
.bilingual{display:grid;grid-template-columns:1fr 1fr;gap:18px;margin-top:8px}
.bilingual .col{border:1px solid var(--line);border-radius:12px;padding:14px 16px;background:#fcfbf8}
.bilingual .col h4{margin:0 0 8px;font-size:.78rem;text-transform:uppercase;letter-spacing:.05em;color:var(--accent)}
.bilingual .col p{margin:0;font-size:.92rem}
.kw{margin-top:14px;font-size:.82rem;color:var(--muted)}
.kw b{color:var(--ink)}
.modal .src{margin-top:18px;font-size:.85rem}
.modal .src a{color:var(--accent);word-break:break-all}

/* Footer */
.site-footer{background:#22272e;color:#aeb6c0;padding:22px 0;font-size:.82rem;margin-top:30px}
.site-footer p{margin:0}

/* Colophon – dezenter Gestaltungshinweis (unauffällig) */
.colophon{margin-top:16px;padding-top:14px;border-top:1px solid rgba(255,255,255,.08);
  font-size:.75rem;line-height:1.6;color:#828b96;max-width:820px}
.colophon-author{margin:0 0 6px;font-weight:600;color:#9aa3ad;letter-spacing:.01em}
.colophon-note{margin:0;color:#767f8a}

/* Responsive */
@media(max-width:680px){
  .hero h1{font-size:1.5rem}
  .bilingual{grid-template-columns:1fr}
  .controls{position:static}
}