/* christian.buerckert.eu — Blasenkammer. Abgenommener Look: vorschlag/blog.html */

/* --- Schriften (lokal, siehe /fonts/README.md) ---------------------------- */
@font-face{font-family:"Spectral";font-style:normal;font-weight:300;font-display:swap;src:url(/fonts/spectral-300.woff2) format("woff2")}
@font-face{font-family:"Spectral";font-style:italic;font-weight:300;font-display:swap;src:url(/fonts/spectral-300-italic.woff2) format("woff2")}
@font-face{font-family:"Spectral";font-style:normal;font-weight:400;font-display:swap;src:url(/fonts/spectral-400.woff2) format("woff2")}
@font-face{font-family:"Spectral";font-style:italic;font-weight:400;font-display:swap;src:url(/fonts/spectral-400-italic.woff2) format("woff2")}
@font-face{font-family:"Spectral";font-style:normal;font-weight:500;font-display:swap;src:url(/fonts/spectral-500.woff2) format("woff2")}
@font-face{font-family:"Martian Mono";font-style:normal;font-weight:300 400;font-display:swap;src:url(/fonts/martian-mono.woff2) format("woff2")}

:root{
  --bg:#07080c; --ink:#ece6d8; --ink-2:#a7a59e; --ink-3:#686b74; --hair:rgba(236,230,216,.13);
  --q:#ffab52;                      /* Fragen leuchten */
  --ember:#ffd9a6; --ember-2:#ffcf8a; --kaela:#150c06; --kline:rgba(255,217,166,.14);
  --mono:"Martian Mono",ui-monospace,"SF Mono",Menlo,Consolas,monospace;
  --serif:"Spectral",Georgia,"Times New Roman",serif;
  --wrap:1180px;
  color-scheme:dark;
}
*{box-sizing:border-box;margin:0;padding:0}
html{background:var(--bg);color:var(--ink);scroll-behavior:smooth;-webkit-text-size-adjust:100%}
body{font:300 18px/1.6 var(--serif);-webkit-font-smoothing:antialiased;min-height:100vh;background:var(--bg)}
a{color:inherit;text-decoration:none}
button,input{font:inherit;color:inherit;background:none;border:0}
[hidden]{display:none!important}
:focus-visible{outline:1px solid var(--q);outline-offset:3px}
.wrap{max-width:var(--wrap);margin:0 auto;padding:0 32px}
.mono{font-family:var(--mono);font-weight:300;font-size:10.5px;letter-spacing:.07em;text-transform:uppercase}
.skip{position:absolute;left:-9999px;top:8px;z-index:50;background:var(--bg);color:var(--ink);padding:6px 10px;border:1px solid var(--ink-3);font:300 11px/1 var(--mono)}
.skip:focus{left:8px}

/* Kopf */
header.top{display:flex;align-items:baseline;justify-content:space-between;gap:24px;padding:30px 0 0;flex-wrap:wrap}
header.top .who{font:400 23px/1 var(--serif);letter-spacing:.005em}
header.top .who span{display:block;margin-top:8px;color:var(--ink-3)}
header.top nav{display:flex;gap:22px;flex-wrap:wrap}
header.top nav a{color:var(--ink-2);padding:4px 0;border-bottom:1px solid transparent}
header.top nav a:hover,header.top nav a.on{color:var(--ink);border-color:var(--ink-3)}

/* Figuren — Strichstärke kommt als --sw vom Element */
svg.fig{display:block;overflow:visible;--sw:.7}
svg.fig path{fill:none;vector-effect:non-scaling-stroke;stroke-linecap:round}
svg.fig .beam{stroke:rgba(236,230,216,.28);stroke-width:calc(var(--sw)*.8)}
svg.fig .t{stroke:var(--ink);stroke-width:var(--sw)}
svg.fig .t.q{stroke:var(--q);stroke-width:calc(var(--sw)*1.25)}
svg.fig .v{fill:var(--ink)}
svg.fig .h{fill:none;stroke:var(--ink);stroke-width:var(--sw);vector-effect:non-scaling-stroke}
/* Zeichnen wie im Prototyp: Länge (--l, in viewBox-Einheiten), Dauer (--d) und Verzögerung (--w)
   stehen am Pfad. Wegen non-scaling-stroke rechnet der Browser Strichmuster in Bildschirm-Pixeln —
   .zf ist deshalb ein Container in Figurbreite, 1cqw = eine viewBox-Einheit. Ohne Container-
   Query-Unterstützung ist die Regel ungültig und die Figur steht einfach fertig da. */
.zf{container-type:inline-size}
.zf>svg.fig{width:100%;height:auto;aspect-ratio:1}
@media (prefers-reduced-motion:no-preference){
  .zf svg.fig.anim path.t{stroke-dasharray:calc(var(--l)*1cqw);stroke-dashoffset:calc(var(--l)*1cqw);animation:zeichnen var(--d) cubic-bezier(.2,.6,.2,1) var(--w) forwards}
}
@keyframes zeichnen{to{stroke-dashoffset:0}}

/* Neuester Beitrag */
.lead{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.05fr);gap:64px;align-items:center;padding:72px 0 64px;border-bottom:1px solid var(--hair)}
.lead.leer{display:block}
.lead .figbox{aspect-ratio:1;max-width:520px;width:100%;justify-self:center}
.lead .figbox svg{width:100%;height:100%}
.lead .meta{color:var(--ink-3);display:flex;gap:18px;flex-wrap:wrap}
.lead .meta a:hover{color:var(--ink)}
.lead h1{font:300 clamp(34px,4.4vw,58px)/1.04 var(--serif);letter-spacing:-.015em;margin:18px 0 22px}
.lead h1 a:hover{color:var(--q)}
.lead p{font:300 italic 20px/1.55 var(--serif);color:var(--ink-2);max-width:34em}
.lead .more{display:inline-block;margin-top:26px;color:var(--ink);border-bottom:1px solid var(--ink-3);padding-bottom:3px}
.lead .more:hover{color:var(--q);border-color:var(--q)}

/* Strom */
.sec-h{display:flex;justify-content:space-between;align-items:baseline;gap:20px;padding:54px 0 18px;flex-wrap:wrap}
.sec-h.top{padding-top:70px}
.sec-h h1,.sec-h h2{font:400 10.5px/1 var(--mono);letter-spacing:.2em;text-transform:uppercase;color:var(--ink-2)}
.sec-h .zahl{color:var(--ink-3)}
.stream{list-style:none;border-top:1px solid var(--hair)}
.stream li a{display:grid;grid-template-columns:76px 110px minmax(0,1fr);gap:26px;align-items:center;padding:20px 0;border-bottom:1px solid var(--hair)}
.stream li svg{width:76px;height:76px}
.stream .d{color:var(--ink-3)}
.stream .ti{display:block;font:400 22px/1.25 var(--serif)}
.stream .ex{font:300 16px/1.45 var(--serif);color:var(--ink-2);margin-top:5px;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.stream li a:hover .ti{color:var(--q)}
.weiter{display:flex;gap:24px;flex-wrap:wrap;margin:30px 0 0;color:var(--ink-2)}
.weiter a:hover{color:var(--ink)}
.themen{list-style:none;border-top:1px solid var(--hair);columns:2 320px;column-gap:40px}
.themen li{break-inside:avoid}
.themen a{display:flex;justify-content:space-between;align-items:baseline;gap:16px;padding:14px 0;border-bottom:1px solid var(--hair)}
.themen .ti{font:400 20px/1.3 var(--serif)} .themen .len{color:var(--ink-3)}
.themen a:hover .ti{color:var(--q)}

/* Archiv / Blasenkammer */
.legend{color:var(--ink-3);max-width:44em;font:300 italic 16px/1.5 var(--serif);margin:-4px 0 26px}
.legend em{font-style:normal;color:var(--q)}
.filter{border-bottom:1px solid var(--ink-3);padding:4px 0;width:220px;font:300 11px/1 var(--mono);letter-spacing:.06em;outline:none;-webkit-appearance:none;appearance:none;border-radius:0}
.filter:focus{border-color:var(--ink-2)}
.filter::placeholder{color:var(--ink-3)}
.years{border-top:1px solid var(--hair)}
.yr{display:grid;grid-template-columns:110px minmax(0,1fr);gap:26px;align-items:center;padding:16px 0;border-bottom:1px solid var(--hair)}
.yr .y{color:var(--ink-2)}
.yr .y small{display:block;color:var(--ink-3);margin-top:6px;font-size:9.5px}
.yr .row{display:flex;flex-wrap:wrap;gap:6px 10px}
.yr .row a{display:block;position:relative;transition:opacity .25s}
.yr .row svg{width:58px;height:58px}
.yr .row a:hover svg,.yr .row a:focus-visible svg{--sw:1.4}
.yr .row a.dim{opacity:.12}
.yr.quiet .row{font:300 italic 16px/1.4 var(--serif);color:var(--ink-3)}
#tip{position:fixed;z-index:20;pointer-events:none;max-width:320px;background:var(--bg);padding:8px 10px;border:1px solid var(--hair)}
#tip .t{font:400 16px/1.3 var(--serif)} #tip .m{margin-top:4px;color:var(--ink-3)}

/* Kaela */
.kaela{background:var(--kaela);color:var(--ember);margin-top:90px;padding:80px 0 90px}
.kaela.voll{margin-top:40px}
.kaela .grid{display:grid;grid-template-columns:300px minmax(0,1fr);gap:64px}
.kaela .grid.ohne-cover{grid-template-columns:minmax(0,1fr)}
.kaela img{width:100%;height:auto;display:block;box-shadow:0 30px 80px rgba(255,150,60,.14)}
.kaela .buecher{position:sticky;top:40px;align-self:start}
.kaela .buch+.buch{margin-top:40px}
.kaela .soon{margin-top:14px;color:var(--ember-2)}
.kaela .soon a{border-bottom:1px solid rgba(255,207,138,.4)} .kaela .soon a:hover{border-color:var(--ember-2)}
.kaela .kick{color:var(--ember-2)}
.kaela h1,.kaela h2#kaela-h{font:300 54px/1 var(--serif);letter-spacing:-.01em;margin-top:14px}
.kaela h1 i,.kaela h2 i{font-weight:300}
.kaela .lede{font:300 italic 19px/1.55 var(--serif);color:rgba(255,217,166,.75);margin:16px 0 34px;max-width:36em}
.kaela h3,.kaela h2.mono{color:rgba(255,217,166,.55);margin:28px 0 8px;font-weight:300}
.kaela ol{list-style:none;border-top:1px solid var(--kline)}
.kaela ol.liste,.kaela ol.hoeren{columns:2 300px;column-gap:40px}
.kaela li{break-inside:avoid;border-bottom:1px solid var(--kline)}
.kaela .liste a,.kaela .zeile{display:grid;grid-template-columns:30px 1fr auto;gap:12px;align-items:center;padding:10px 0}
.kaela .liste a:hover .ti{color:#fff1dc}
.kaela .n{color:rgba(255,217,166,.45)}
.kaela .ti{font:400 17px/1.3 var(--serif)}
.kaela .len{color:rgba(255,217,166,.45)}
.kaela .free{font:300 italic 15px/1.5 var(--serif);color:rgba(255,217,166,.6);margin-top:26px}
.kaela p.free.mono{font:300 10.5px/1.5 var(--mono);margin:-18px 0 0;color:rgba(255,217,166,.55)}
.kaela .pfeil{border-bottom:1px solid rgba(255,217,166,.4)} .kaela .pfeil:hover{border-color:var(--ember)}
.kaela .hoeren li{padding-bottom:12px}
.kaela .hoeren .zeile{padding-bottom:6px}
.kaela audio{display:block;width:100%;height:34px;opacity:.82;filter:sepia(.35)}
.kaela audio:hover,.kaela audio:focus-within{opacity:1}
.kaela ol.filme{display:grid;grid-template-columns:repeat(auto-fill,minmax(280px,1fr));gap:26px 28px;border-top:0;padding-top:6px}
.kaela .filme li{border-bottom:0}
.kaela .filme .zeile{border-bottom:1px solid var(--kline)}
.kaela video{display:block;width:100%;aspect-ratio:16/9;height:auto;background:#000;object-fit:cover}
.kaela li:target .ti{color:#fff1dc}
body.warm{background:var(--kaela)} body.warm .wrap>header.top{padding-bottom:0}
body.warm footer{color:rgba(255,217,166,.45)} body.warm footer a:hover{color:var(--ember)}

footer{padding:40px 0 60px;color:var(--ink-3);display:flex;gap:24px;flex-wrap:wrap}
footer a:hover{color:var(--ink)}

/* Leseansicht */
.read{display:grid;grid-template-columns:300px minmax(0,680px);gap:72px;padding:64px 0 120px;justify-content:center}
.read.solo{grid-template-columns:minmax(0,720px)}
.read aside{position:sticky;top:40px;align-self:start}
.read aside .zf{width:300px}
.read aside .cap{font:300 italic 14.5px/1.5 var(--serif);color:var(--ink-3);margin-top:18px}
.read aside .cap em{font-style:normal;color:var(--q)}
.read aside dl{margin-top:22px;color:var(--ink-2)}
.read aside dt{color:var(--ink-3);margin-top:12px;font-size:9px;letter-spacing:.16em}
.read aside dd{color:var(--ink);text-transform:none;letter-spacing:.03em}
.read aside dd a:hover{color:var(--q)}
.read aside .auch{margin-top:22px;text-transform:none;letter-spacing:.03em;line-height:1.6}
.read aside .auch a{color:var(--ink-2);border-bottom:1px solid var(--ink-3)} .read aside .auch a:hover{color:var(--q);border-color:var(--q)}
.read article{font:300 20px/1.68 var(--serif);color:#e2dccf;min-width:0;overflow-wrap:break-word}
.read article h1{font:300 clamp(34px,4vw,50px)/1.07 var(--serif);letter-spacing:-.015em;color:var(--ink);margin-bottom:34px}
.read article h2,.read article h3{font:400 italic 26px/1.25 var(--serif);color:var(--ink);margin:1.6em 0 .5em}
.read article h4,.read article h5,.read article h6{font:400 13px/1.4 var(--mono);margin:1.6em 0 .4em}
.read article p{margin:0 0 1.05em}
.read article ul,.read article ol{margin:0 0 1.1em 1.2em}
.read article li{margin:0 0 .35em}
.read article a{color:var(--q);text-decoration:underline;text-decoration-thickness:1px;text-underline-offset:3px}
.read article hr{border:0;height:1px;background:var(--hair);margin:2.4em 0}
.read article img{max-width:100%;height:auto;display:block;margin:1.4em 0}
.read article figure{margin:1.4em 0}
.read article figure img{margin:0}
.read article figcaption{font:300 italic 15px/1.5 var(--serif);color:var(--ink-3);margin-top:8px}
.read article .aligncenter{margin-left:auto;margin-right:auto}
.read article .alignright{float:right;margin:.3em 0 1em 1.5em;max-width:50%}
.read article .alignleft{float:left;margin:.3em 1.5em 1em 0;max-width:50%}
.read article pre{font:300 13px/1.6 var(--mono);background:rgba(255,255,255,.035);border-left:1px solid var(--ink-3);padding:16px 18px;overflow:auto;margin:1.4em 0}
.read article code{font-family:var(--mono);font-size:.78em}
.read article pre code{font-size:inherit}
.read article blockquote{border-left:1px solid var(--q);padding-left:22px;font-style:italic;color:var(--ink);margin:0 0 1.05em}
.read article table{border-collapse:collapse;font:300 13px/1.5 var(--mono);margin:1.4em 0;width:100%}
.read article td,.read article th{border-bottom:1px solid var(--hair);padding:8px 10px 8px 0;text-align:left;vertical-align:top}
.read article audio{width:100%;margin:1em 0}
.read article video,.read article iframe{max-width:100%}
.read article::after{content:"";display:table;clear:both}
.back{display:inline-block;margin-top:34px;color:var(--ink-2)} .back:hover{color:var(--ink)}
.neighbours{display:grid;grid-template-columns:1fr 1fr;gap:28px;border-top:1px solid var(--hair);margin-top:60px;padding-top:26px;clear:both}
.read article .neighbours a{color:inherit;text-decoration:none;display:grid;grid-template-columns:58px 1fr;gap:16px;align-items:center}
.read article .neighbours a.next{grid-template-columns:1fr 58px;text-align:right}
.neighbours svg{width:58px;height:58px}
.neighbours .d{color:var(--ink-3)}
.neighbours .ti{font:400 16px/1.3 var(--serif);text-transform:none;letter-spacing:0} .neighbours a:hover .ti{color:var(--q)}

@media (max-width:860px){
  .wrap{padding:0 18px}
  .lead{grid-template-columns:1fr;gap:28px;padding:40px 0 44px}
  .lead .figbox{max-width:320px}
  .stream li a{grid-template-columns:56px minmax(0,1fr);gap:16px}
  .stream li svg{width:56px;height:56px} .stream .d{display:none}
  .yr{grid-template-columns:1fr;gap:10px} .yr .row svg{width:46px;height:46px}
  .filter{width:100%}
  .kaela{padding:56px 0 64px}
  .kaela .grid{grid-template-columns:1fr;gap:34px} .kaela .buecher{position:static} .kaela img{max-width:240px} .kaela h1,.kaela h2#kaela-h{font-size:40px}
  .read{grid-template-columns:1fr;gap:26px;padding:34px 0 100px}
  .read.solo{grid-template-columns:minmax(0,1fr)}
  .read aside{position:static;display:grid;grid-template-columns:120px 1fr;gap:6px 16px;align-items:start}
  .read aside .zf{width:120px;grid-row:span 3}
  .read aside .cap{margin-top:0} .read aside dl{margin-top:0} .read aside .back{margin-top:8px}
  .read article{font-size:18px}
  .read article table{display:block;overflow-x:auto}
  .read article .alignright,.read article .alignleft{float:none;margin:1.4em 0;max-width:100%}
  .neighbours{grid-template-columns:1fr}
}
@media (prefers-reduced-motion:reduce){*{animation:none!important;transition:none!important}html{scroll-behavior:auto}}
@media print{
  :root{--bg:#fff;--ink:#111;--ink-2:#333;--ink-3:#666;--hair:#ccc}
  header.top nav,footer,.neighbours,.back,.skip{display:none}
  .read{display:block;padding:0} .read aside{display:none} .read article{color:#111}
}