/* Shared CSS for blog + projekte listing/detail pages.
   Font presets and theme tokens come from chrome.css. */
*{box-sizing:border-box;}
html,body{margin:0;padding:0;}
body{
  font-family:var(--f-body);
  background:var(--bg); color:var(--ink);
  font-size:15.5px; line-height:1.6;
  letter-spacing:-0.005em;
  -webkit-font-smoothing:antialiased;
}
a{color:inherit;text-decoration:none;}
a:hover{color:var(--accent);}
::selection{background:var(--accent); color:#fff;}
img{max-width:100%; height:auto; display:block;}

.container{
  max-width:860px; margin:0 auto;
  padding-left:max(clamp(18px,4vw,34px), env(safe-area-inset-left));
  padding-right:max(clamp(18px,4vw,34px), env(safe-area-inset-right));
}
.container.wide{max-width:1080px;}

main{padding:72px 0 120px;}

.crumb{
  font-family:var(--f-mono); font-size:11px; letter-spacing:.1em;
  text-transform:uppercase; color:var(--ink-mute); margin-bottom:24px;
}
.crumb a{color:var(--ink-mute);}
.crumb a:hover{color:var(--ink);}
.crumb span{color:var(--ink);}

h1.page-title{
  font-family:var(--f-display); font-weight:var(--d-weight); font-style:var(--d-style);
  font-size:clamp(44px,6vw,84px); line-height:1; letter-spacing:var(--d-track);
  margin:0 0 24px;
}
p.page-lede{
  font-size:18px; line-height:1.55; color:var(--ink);
  max-width:62ch; margin:0 0 48px;
}

/* List — cards */
.post-list{
  list-style:none; padding:0; margin:0;
  display:grid; gap:0;
  border-top:1px solid var(--rule);
}
.post-list li{border-bottom:1px solid var(--rule);}
.post-list a{
  display:grid; grid-template-columns:1fr auto; gap:24px;
  padding:24px 0; align-items:start;
  transition:padding-left .15s;
}
.post-list a:hover{padding-left:10px;}
.post-list .headline{
  font-family:var(--f-display); font-weight:var(--d-weight); font-style:var(--d-style);
  font-size:clamp(22px,2.6vw,30px); line-height:1.15; letter-spacing:var(--d-track);
  margin:0 0 8px; color:var(--ink);
}
.post-list .excerpt{
  font-size:15px; line-height:1.55; color:var(--ink-soft);
  margin:0; max-width:62ch;
}
.post-list .meta{
  font-family:var(--f-mono); font-size:10.5px; letter-spacing:.08em;
  text-transform:uppercase; color:var(--ink-mute);
  white-space:nowrap; padding-top:6px;
}
.post-list .meta .tag{
  display:inline-block; margin-left:10px;
  padding:3px 8px; border:1px solid var(--rule-strong); border-radius:4px;
  color:var(--ink-soft);
}

.empty{
  padding:64px 0; text-align:center;
  color:var(--ink-mute);
  font-family:var(--f-mono); font-size:12px; letter-spacing:.08em;
  text-transform:uppercase;
}

/* Detail — article */
article.post{
  max-width:680px; margin:0 auto;
}
article.post .post-meta{
  display:flex; gap:14px; flex-wrap:wrap; align-items:center;
  font-family:var(--f-mono); font-size:11px; letter-spacing:.08em;
  text-transform:uppercase; color:var(--ink-mute);
  margin-bottom:20px;
}
article.post .post-meta .sep{width:14px; height:1px; background:var(--rule-strong);}
article.post h1{
  font-family:var(--f-display); font-weight:var(--d-weight); font-style:var(--d-style);
  font-size:clamp(36px,5vw,64px); line-height:1.05; letter-spacing:var(--d-track);
  margin:0 0 20px;
}
article.post > p:first-of-type{
  font-size:19px; line-height:1.55; color:var(--ink); max-width:60ch;
}
article.post .cover{
  margin:32px 0 48px;
  border-radius:12px; overflow:hidden;
  border:1px solid var(--rule);
  aspect-ratio:16/9; background:var(--bg-2);
}
article.post .cover img{width:100%; height:100%; object-fit:cover;}

.prose{
  font-size:16.5px; line-height:1.7; color:var(--ink-soft);
}
.prose h2{
  font-family:var(--f-display); font-weight:var(--d-weight); font-style:var(--d-style);
  font-size:clamp(24px,3vw,32px); line-height:1.15; letter-spacing:var(--d-track);
  color:var(--ink);
  margin:56px 0 16px;
}
.prose h3{
  font-family:var(--f-display); font-weight:var(--d-weight); font-style:var(--d-style);
  font-size:22px; line-height:1.2; letter-spacing:var(--d-track); color:var(--ink);
  margin:40px 0 12px;
}
.prose p{margin:0 0 16px; max-width:62ch;}
.prose p strong, .prose li strong{color:var(--ink); font-weight:500;}
.prose ul, .prose ol{margin:0 0 16px; padding-left:22px; max-width:62ch;}
.prose li{margin-bottom:6px;}
.prose a{
  color:var(--ink); border-bottom:1px solid var(--rule-strong);
}
.prose a:hover{color:var(--accent); border-color:var(--accent);}
.prose blockquote{
  margin:24px 0; padding:4px 0 4px 18px;
  border-left:2px solid var(--accent);
  font-family:var(--f-display); font-size:20px; line-height:1.4;
  color:var(--ink); font-style:italic;
  max-width:58ch;
}
.prose code{
  font-family:var(--f-mono); font-size:.92em;
  background:var(--bg-2); padding:1px 6px; border-radius:4px;
}
.prose pre{
  font-family:var(--f-mono); font-size:13px;
  background:var(--bg-2); border:1px solid var(--rule);
  padding:16px 18px; border-radius:8px;
  overflow-x:auto; margin:20px 0;
  max-width:100%;
}
.prose pre code{background:none; padding:0; border-radius:0;}
.prose hr{
  border:0; border-top:1px solid var(--rule);
  margin:40px 0;
}
.prose img{
  margin:24px 0; border-radius:8px;
  border:1px solid var(--rule);
}

.tags-row{
  display:flex; gap:8px; flex-wrap:wrap;
  margin-top:40px; padding-top:24px; border-top:1px solid var(--rule);
}
.tags-row span{
  font-family:var(--f-mono); font-size:10.5px; letter-spacing:.08em;
  padding:4px 9px; border:1px solid var(--rule-strong); border-radius:4px;
  color:var(--ink-soft);
}

/* Projekte-specific detail facts */
.project-facts{
  display:grid; grid-template-columns:repeat(auto-fit, minmax(160px, 1fr));
  gap:18px 28px;
  border-top:1px solid var(--rule); border-bottom:1px solid var(--rule);
  padding:22px 0; margin:0 0 40px;
}
.project-facts .f .k{
  font-family:var(--f-mono); font-size:10px; letter-spacing:.1em;
  text-transform:uppercase; color:var(--ink-mute); margin-bottom:4px;
}
.project-facts .f .v{font-size:14.5px; color:var(--ink);}
.project-facts .f .v a{border-bottom:1px solid var(--rule-strong);}
.project-facts .f .v .chip{
  display:inline-block; margin:2px 4px 0 0;
  font-family:var(--f-mono); font-size:10.5px;
  padding:3px 7px; border:1px solid var(--rule-strong); border-radius:4px;
  color:var(--ink-soft);
}

/* Legal pages (impressum, datenschutz) */
.legal h1{
  font-family:var(--f-display); font-weight:var(--d-weight); font-style:var(--d-style);
  font-size:clamp(44px,6vw,84px); line-height:1; letter-spacing:var(--d-track);
  margin:0 0 32px;
}
.legal h2{
  font-family:var(--f-display); font-weight:var(--d-weight); font-style:var(--d-style);
  font-size:clamp(24px,3vw,32px); line-height:1.1; letter-spacing:var(--d-track);
  margin:56px 0 16px;
}
.legal .sec-num{
  font-family:var(--f-mono); font-size:11px; letter-spacing:.1em;
  color:var(--accent); display:block; margin-bottom:6px;
}
.legal p{margin:0 0 14px; color:var(--ink-soft); max-width:62ch;}
.legal p strong, .legal li strong{color:var(--ink); font-weight:500;}
.legal .lead{font-size:18px; line-height:1.55; color:var(--ink); max-width:58ch; margin-bottom:40px;}
.legal ul{margin:0 0 14px; padding-left:20px; color:var(--ink-soft); max-width:62ch;}
.legal ul li{margin-bottom:6px;}
.legal .card{
  background:var(--card); border:1px solid var(--rule);
  border-radius:12px; padding:24px 28px; margin:0 0 14px;
}
.legal .card p:last-child{margin:0;}
.legal .meta-strip{
  display:flex; gap:24px; flex-wrap:wrap;
  border-top:1px solid var(--rule); border-bottom:1px solid var(--rule);
  padding:18px 0; margin:0 0 40px;
  font-family:var(--f-mono); font-size:11px; letter-spacing:.04em; color:var(--ink-mute);
}
.legal .meta-strip span b{color:var(--ink); font-weight:500;}
.legal .facts{
  display:grid; grid-template-columns:1fr 1fr; gap:20px 32px;
  border-top:1px solid var(--rule); border-bottom:1px solid var(--rule);
  padding:28px 0; margin:0 0 40px;
}
.legal .facts .f .k{
  font-family:var(--f-mono); font-size:10px; letter-spacing:.1em;
  text-transform:uppercase; color:var(--ink-mute); margin-bottom:4px;
}
.legal .facts .f .v{font-size:15px; color:var(--ink);}
.legal .facts .f .v a{border-bottom:1px solid var(--rule-strong);}
@media (max-width:640px){
  .legal .facts{grid-template-columns:1fr;}
}

@media (max-width:640px){
  main{padding:48px 0 96px;}
  .post-list a{grid-template-columns:1fr;}
  .post-list .meta{padding-top:10px;}
  article.post .cover{aspect-ratio:4/3;}
}