/* Schwarzstorch */

@font-face {
  font-family: 'JetBrains Mono';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url(/fonts/JetBrainsMono-normal-0.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Playfair Display';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url(/fonts/PlayfairDisplay-normal-1.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Source Serif 4';
  font-style: italic;
  font-weight: 400;
  font-display: swap;
  src: url(/fonts/SourceSerif4-italic-2.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Source Serif 4';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url(/fonts/SourceSerif4-normal-3.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Source Serif 4';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url(/fonts/SourceSerif4-normal-3.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Space Grotesk';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url(/fonts/SpaceGrotesk-normal-4.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Space Grotesk';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url(/fonts/SpaceGrotesk-normal-4.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Space Grotesk';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url(/fonts/SpaceGrotesk-normal-4.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

*,*::before,*::after{margin:0;padding:0;box-sizing:border-box}
html{-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale}
img{max-width:100%;height:auto;display:block}
a{color:inherit;text-decoration:none}
:root{--bg:#0A0A0A;--card:#141414;--border:#222;--border-light:#333;--text:#F5F2EC;--sec:#999;--muted:#666;--faint:#444;
--serif:'Playfair Display',Georgia,serif;--sans:'Space Grotesk',-apple-system,sans-serif;--body:'Source Serif 4',Georgia,serif;--mono:'JetBrains Mono',monospace;
--xs:8px;--sm:16px;--md:24px;--lg:48px;--xl:80px;--2xl:120px;--3xl:160px;--max:1200px;--content:720px;--head:72px}
body{font-family:var(--sans);font-size:16px;line-height:1.6;color:var(--text);background:var(--bg);overflow-x:hidden;display:flex;flex-direction:column;min-height:100vh}
main{flex:1}

.site-header{position:absolute;top:0;left:0;right:0;height:var(--head);display:flex;align-items:center;padding:0 var(--md);z-index:10}
.header-inner{display:flex;justify-content:space-between;align-items:center;width:100%;max-width:var(--max);margin:0 auto}
.logo{font-size:14px;font-weight:600;letter-spacing:.15em;text-transform:uppercase}
.nav{display:flex;gap:var(--md)}
.nav a{font-size:12px;letter-spacing:.12em;text-transform:uppercase;color:var(--sec);transition:color .3s}
.nav a:hover,.nav a.on{color:var(--text)}


/* Home */
.grid-section{padding:calc(var(--head) + var(--xl)) var(--md) var(--2xl)}
.grid-inner{max-width:var(--max);margin:0 auto}
.grid{display:grid;grid-template-columns:3fr 2fr;gap:var(--md)}
.tile{background:var(--card)}
.item:nth-child(4n+1) .tile,.item:nth-child(4n+4) .tile{aspect-ratio:4/3}
.item:nth-child(4n+2) .tile,.item:nth-child(4n+3) .tile{aspect-ratio:1/1}
.info{padding:var(--sm) 0}
.item-title{font-family:var(--serif);font-size:20px;font-weight:400;line-height:1.3;margin-bottom:6px;transition:opacity .3s}
.item:hover .item-title{opacity:.7}
.item-meta{font-family:var(--mono);font-size:11px;color:var(--faint);letter-spacing:.03em}

/* Über + Literatur */
.wide{max-width:var(--max);margin:0 auto;padding:0 var(--md)}
.hero{padding:calc(var(--head) + var(--xl)) 0 var(--lg)}
.big{font-family:var(--serif);font-size:clamp(60px,10vw,140px);font-weight:400;line-height:1}
.rule{border:none;border-top:1px solid var(--border)}
.about{display:grid;grid-template-columns:38.2% 1fr;gap:var(--lg);padding:var(--lg) 0 var(--3xl);align-items:start}
.about img{width:100%}
.name{font-family:var(--serif);font-size:28px;display:block;margin-bottom:var(--xs)}
.cred{font-size:13px;letter-spacing:.08em;color:var(--muted);display:block;margin-bottom:var(--lg)}
.about p{font-family:var(--body);font-size:17px;line-height:1.75;color:var(--sec);margin-bottom:var(--md)}
.intro{font-family:var(--body);font-size:17px;line-height:1.6;color:var(--sec);max-width:62ch;margin-top:var(--md)}
.cat{padding:var(--lg) 0;border-bottom:1px solid var(--border)}
.cat:last-child{border-bottom:none;padding-bottom:var(--3xl)}
.label{font-size:11px;font-weight:500;letter-spacing:.2em;text-transform:uppercase;color:var(--muted);display:block;margin-bottom:var(--lg)}
.books{display:grid;grid-template-columns:repeat(2,1fr);gap:var(--lg)}
.book{display:flex;flex-direction:column;gap:var(--xs);padding:var(--md) 0;border-top:1px solid var(--border-light)}
.book h3{font-family:var(--serif);font-size:22px;font-weight:400;line-height:1.25}
.author{font-size:13px;font-weight:500;letter-spacing:.05em}
.year{font-family:var(--mono);font-size:11px;color:var(--faint);margin-bottom:var(--xs)}
.book p{font-family:var(--body);font-size:15px;line-height:1.65;color:var(--sec)}

/* Beitrag */
.post-head{max-width:var(--max);margin:0 auto;padding:calc(var(--head) + var(--xl)) var(--md) var(--lg)}
.back{font-size:12px;font-weight:500;letter-spacing:.12em;text-transform:uppercase;color:var(--muted);display:inline-block;margin-bottom:var(--lg)}
.meta{font-family:var(--mono);font-size:11px;letter-spacing:.05em;color:var(--sec);margin-bottom:var(--lg)}
.post-title{font-family:var(--serif);font-size:clamp(32px,5vw,64px);font-weight:400;line-height:1.1;margin-bottom:var(--md)}
.prose{max-width:var(--content);margin:0 auto;padding:0 var(--md) var(--3xl);font-family:var(--body);font-size:19px;line-height:1.75;color:var(--sec)}
.prose p{margin-bottom:var(--md)}
.prose h2{font-family:var(--serif);font-size:32px;font-weight:400;line-height:1.25;color:var(--text);margin-top:var(--xl);margin-bottom:var(--sm)}
.prose h3{font-family:var(--serif);font-size:24px;font-weight:400;line-height:1.3;color:var(--text);margin-top:var(--lg);margin-bottom:var(--sm)}
.prose strong{color:var(--text);font-weight:600}

/* Textseite */
.static{max-width:var(--content);margin:0 auto;padding:0 var(--md)}
.static-head{padding-top:calc(var(--head) + var(--xl))}
.page-title{font-family:var(--serif);font-size:clamp(32px,5vw,56px);font-weight:400;line-height:1.1;margin-bottom:var(--md)}
.static .prose{padding:var(--md) 0 var(--3xl)}

/* Footer */
.foot{border-top:1px solid var(--border);padding:var(--md)}
.foot-inner{max-width:var(--max);margin:0 auto;display:flex;justify-content:space-between;align-items:center;flex-wrap:wrap;gap:var(--xs) var(--md);font-family:var(--mono);font-size:11px;color:var(--muted)}
.foot nav{display:flex;gap:var(--md)}
.foot a{transition:color .3s}.foot a:hover{color:var(--text)}

@media(max-width:1024px){.grid{grid-template-columns:1fr}}
@media(max-width:768px){:root{--xl:56px;--2xl:80px;--3xl:100px}.big{font-size:48px}.about,.books{grid-template-columns:1fr}.prose{font-size:17px}.post-title{font-size:clamp(28px,7vw,48px)}.nav{gap:var(--sm)}.nav a{font-size:11px;letter-spacing:.08em}.logo{font-size:12px;letter-spacing:.1em}}

/* Bilder */
.tile{position:relative;overflow:hidden}
.tile img{width:100%;height:100%;object-fit:cover;transition:transform .6s cubic-bezier(.16,1,.3,1)}
.item:hover .tile img{transform:scale(1.03)}
.pixel-canvas{position:absolute;inset:0;width:100%;height:100%;opacity:0;transition:opacity .4s;pointer-events:none}
.item:hover .pixel-canvas{opacity:1}
.post-image{width:100%;max-width:var(--max);margin:0 auto var(--xl);padding:0 var(--md)}
.post-image img{width:100%}
.prose a{color:var(--text);text-decoration:underline;text-underline-offset:3px;text-decoration-color:var(--faint)}
.prose ul,.prose ol{padding-left:var(--md);margin-bottom:var(--md)}
.prose li{margin-bottom:var(--xs)}
.empty{padding:var(--lg) 0 var(--3xl)}
@media(max-width:768px){.pixel-canvas{display:none}}