/* ============================================================
   fabianalbrecht.me — "Editorial Nachtschicht"
   Riso / Overprint · warmes Tinten-Dunkel · Magazin-Typo
   ============================================================ */

/* ---------- Self-hosted fonts (DSGVO) ----------
   Statische Schnitte als .woff2 in ../Fonts/ ablegen.
   Einfachste Quelle: google-webfonts-helper (gwfh.mranftl.com)
   → Schrift wählen → Gewicht ankreuzen → woff2 laden → so benennen
   wie unten. Genaue Anleitung: Fonts/README.md
   Fehlt eine Datei, greift automatisch der System-Fallback.        */

/* Bricolage Grotesque — Display/Headlines */
@font-face{font-family:"Bricolage Grotesque";src:url("../Fonts/BricolageGrotesque-400.woff2") format("woff2");font-weight:400;font-display:swap;font-style:normal;}
@font-face{font-family:"Bricolage Grotesque";src:url("../Fonts/BricolageGrotesque-500.woff2") format("woff2");font-weight:500;font-display:swap;font-style:normal;}
@font-face{font-family:"Bricolage Grotesque";src:url("../Fonts/BricolageGrotesque-700.woff2") format("woff2");font-weight:700;font-display:swap;font-style:normal;}
@font-face{font-family:"Bricolage Grotesque";src:url("../Fonts/BricolageGrotesque-800.woff2") format("woff2");font-weight:800;font-display:swap;font-style:normal;}

/* Newsreader — Fließtext */
@font-face{font-family:"Newsreader";src:url("../Fonts/Newsreader-400.woff2") format("woff2");font-weight:400;font-display:swap;font-style:normal;}
@font-face{font-family:"Newsreader";src:url("../Fonts/Newsreader-500.woff2") format("woff2");font-weight:500;font-display:swap;font-style:normal;}
@font-face{font-family:"Newsreader";src:url("../Fonts/Newsreader-400italic.woff2") format("woff2");font-weight:400;font-display:swap;font-style:italic;}

/* DM Mono — Meta/Kicker */
@font-face{font-family:"DM Mono";src:url("../Fonts/DMMono-400.woff2") format("woff2");font-weight:400;font-display:swap;font-style:normal;}
@font-face{font-family:"DM Mono";src:url("../Fonts/DMMono-500.woff2") format("woff2");font-weight:500;font-display:swap;font-style:normal;}

/* ---------- Tokens ---------- */
:root{
  --ink-bg:#17130E;
  --ink-bg-2:#1B1610;
  --ink-surface:#211B13;
  --ink-surface-2:#272015;
  --ink-rule:#3A3124;
  --ink-rule-soft:#2E2719;

  --paper:#ECE1CC;
  --paper-strong:#F6EFDC;
  --paper-muted:#9C8E73;
  --paper-faint:#6F6450;

  --ink-a:#FF4D23;   /* Vermillion — Events */
  --ink-b:#C9E94C;   /* Acid — IT & KI */
  --ink-c:#8A7BFF;   /* Iris — Organisation */
  --ink-overlap:#8C5A1E;

  --maxw:1280px;
  --gut:clamp(20px,4.5vw,72px);

  --font-display:"Bricolage Grotesque",sans-serif;
  --font-body:"Newsreader",Georgia,serif;
  --font-mono:"DM Mono","Courier New",monospace;

  --ease:cubic-bezier(.2,.7,.2,1);
}

*{box-sizing:border-box;}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth;}
body{
  margin:0;
  background:var(--ink-bg);
  color:var(--paper);
  font-family:var(--font-body);
  font-size:clamp(17px,1.15vw,19px);
  line-height:1.62;
  font-weight:380;
  -webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility;
  overflow-x:hidden;
}
::selection{background:var(--ink-a);color:var(--ink-bg);}
a{color:inherit;text-decoration:none;}
img{max-width:100%;display:block;}
p{margin:0 0 1.1em;text-wrap:pretty;}
p:last-child{margin-bottom:0;}

/* ---------- Print substrate: grain + faint column rule ---------- */
.grain{
  position:fixed;inset:0;z-index:9000;pointer-events:none;
  opacity:.04;mix-blend-mode:overlay;
  background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='200' height='200'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2' stitchTiles='stitch'/></filter><rect width='200' height='200' filter='url(%23n)'/></svg>");
}
@keyframes grainmove{
  0%{transform:translate(0,0)} 16%{transform:translate(-4%,2%)}
  33%{transform:translate(3%,-3%)} 50%{transform:translate(-2%,4%)}
  66%{transform:translate(4%,1%)} 83%{transform:translate(-3%,-2%)}
  100%{transform:translate(0,0)}
}
@media (prefers-reduced-motion:reduce){
  .grain{animation:none;}
  *{scroll-behavior:auto !important;}
}

/* halftone dot helpers */
.halftone{
  background-image:radial-gradient(currentColor 1.1px,transparent 1.3px);
  background-size:7px 7px;
}

/* ---------- Layout shell ---------- */
.wrap{max-width:var(--maxw);margin:0 auto;padding-inline:var(--gut);}
.view{display:none;}
.view.is-active{display:block;animation:viewin .5s var(--ease) both;}
@keyframes viewin{from{opacity:0;transform:translateY(6px)}to{opacity:1;transform:none}}

/* ---------- Header / Nav ---------- */
.site-head{
  position:sticky;top:0;z-index:8000;
  background:color-mix(in oklab,var(--ink-bg) 86%,transparent);
  backdrop-filter:blur(7px);
  border-bottom:1px solid var(--ink-rule);
}
.site-head .wrap{display:flex;align-items:center;justify-content:space-between;
  height:68px;}
.brand{font-family:var(--font-display);font-weight:800;font-size:26px;
  letter-spacing:-.02em;line-height:1;position:relative;color:var(--paper-strong);
  cursor:pointer;}
.brand .mis{position:absolute;inset:0;color:var(--ink-a);
  transform:translate(2px,1.5px);mix-blend-mode:screen;z-index:-1;
  transition:transform .25s var(--ease);}
.brand:hover .mis{transform:translate(-2px,-1.5px);color:var(--ink-b);}

.nav{display:flex;gap:clamp(14px,2.4vw,34px);align-items:center;}
.nav a{
  font-family:var(--font-mono);font-size:12.5px;letter-spacing:.08em;
  text-transform:uppercase;color:var(--paper-muted);padding:6px 2px;
  position:relative;transition:color .2s var(--ease);
}
.nav a::after{content:"";position:absolute;left:0;right:100%;bottom:1px;height:2px;
  background:var(--ink-a);transition:right .28s var(--ease);}
.nav a:hover{color:var(--paper-strong);}
.nav a:hover::after,.nav a.current::after{right:0;}
.nav a.current{color:var(--paper-strong);}
.nav-burger{display:none;background:none;border:0;color:var(--paper);cursor:pointer;
  font-family:var(--font-mono);font-size:12px;letter-spacing:.1em;text-transform:uppercase;}

@media (max-width:720px){
  .nav{position:fixed;inset:68px 0 auto 0;flex-direction:column;gap:0;
    background:var(--ink-surface);border-bottom:1px solid var(--ink-rule);
    padding:8px var(--gut) 18px;transform:translateY(-12px);opacity:0;
    pointer-events:none;transition:.25s var(--ease);align-items:flex-start;}
  .nav.open{transform:none;opacity:1;pointer-events:auto;}
  .nav a{font-size:15px;padding:12px 0;width:100%;border-bottom:1px solid var(--ink-rule-soft);}
  .nav-burger{display:block;}
}

/* ---------- Kicker / Section numbers / shared bits ---------- */
.kicker{font-family:var(--font-mono);font-size:12.5px;letter-spacing:.14em;
  text-transform:uppercase;color:var(--paper-muted);display:inline-flex;gap:10px;
  align-items:center;}
.kicker::before{content:"";width:26px;height:1px;background:var(--ink-a);display:inline-block;}

.bignum{font-family:var(--font-display);font-weight:800;line-height:.8;
  font-size:clamp(80px,16vw,230px);color:transparent;
  -webkit-text-stroke:1.4px var(--ink-rule);letter-spacing:-.03em;}

.eyebrow{font-family:var(--font-mono);font-size:12px;letter-spacing:.12em;
  text-transform:uppercase;color:var(--paper-muted);}

/* misregistered display headline */
.over{position:relative;display:inline-block;}
.over .g1,.over .g2{position:absolute;inset:0;pointer-events:none;}
.over .g1{color:var(--ink-a);transform:translate(3px,2px);mix-blend-mode:screen;}
.over .g2{color:var(--ink-c);transform:translate(-3px,-2px);mix-blend-mode:screen;}

/* hand-drawn marker underline */
.mark{position:relative;white-space:nowrap;}
.mark svg{position:absolute;left:-2%;bottom:-.32em;width:104%;height:.5em;
  overflow:visible;pointer-events:none;}
.mark svg path{fill:none;stroke:var(--ink-b);stroke-width:5;stroke-linecap:round;
  stroke-dasharray:var(--len,400);stroke-dashoffset:var(--len,400);}
.reveal.in .mark svg path{animation:draw 1s var(--ease) .35s forwards;}
@keyframes draw{to{stroke-dashoffset:0;}}

/* stamp badge */
.stamp{
  --c:var(--ink-a);
  width:128px;height:128px;border-radius:50%;
  border:1.5px solid var(--c);color:var(--c);position:relative;
  display:grid;place-items:center;flex:none;
  transform:rotate(-11deg);transition:transform .5s var(--ease);
}
.stamp:hover{transform:rotate(-2deg) scale(1.04);}
.stamp .ring{position:absolute;inset:7px;border-radius:50%;
  border:1px dashed color-mix(in oklab,var(--c) 60%,transparent);}
.stamp .core{font-family:var(--font-display);font-weight:800;font-size:17px;
  text-align:center;line-height:1;text-transform:uppercase;letter-spacing:.02em;}
.stamp .core small{display:block;font-family:var(--font-mono);font-weight:400;
  font-size:8.5px;letter-spacing:.14em;margin-top:5px;color:color-mix(in oklab,var(--c) 78%,var(--paper));}

/* buttons — "stamped" */
.btn{display:inline-flex;align-items:center;gap:12px;font-family:var(--font-mono);
  font-size:13px;letter-spacing:.08em;text-transform:uppercase;
  padding:14px 22px;border:1.5px solid var(--ink-a);color:var(--paper-strong);
  background:transparent;cursor:pointer;position:relative;transition:.22s var(--ease);}
.btn .dot{width:7px;height:7px;border-radius:50%;background:var(--ink-a);transition:.22s var(--ease);}
.btn:hover{background:var(--ink-a);color:var(--ink-bg);transform:translate(-2px,-2px);
  box-shadow:5px 5px 0 var(--ink-rule);}
.btn:hover .dot{background:var(--ink-bg);}
.btn.ghost{border-color:var(--ink-rule);}
.btn.ghost .dot{background:var(--ink-b);}
.btn.ghost:hover{background:var(--ink-surface-2);color:var(--paper-strong);border-color:var(--ink-b);box-shadow:5px 5px 0 var(--ink-rule);}

/* reveal */
.reveal{opacity:0;transform:translateY(20px);
  transition:opacity .7s var(--ease),transform .7s var(--ease);}
.reveal.in{opacity:1;transform:none;}
.reveal[data-d="1"]{transition-delay:.08s}
.reveal[data-d="2"]{transition-delay:.16s}
.reveal[data-d="3"]{transition-delay:.24s}

/* ============================================================
   HERO
   ============================================================ */
.hero{position:relative;padding:clamp(40px,7vw,88px) 0 clamp(48px,7vw,90px);
  border-bottom:1px solid var(--ink-rule);overflow:hidden;}
.hero-grid{display:grid;grid-template-columns:1.15fr .85fr;gap:clamp(24px,4vw,56px);
  align-items:center;position:relative;z-index:2;}
.hero h1{font-family:var(--font-display);font-weight:800;
  font-size:clamp(40px,6vw,92px);line-height:.96;letter-spacing:-.035em;
  margin:.28em 0 .42em;color:var(--paper-strong);}
.hero h1 .row{display:block;overflow:hidden;}
.hero h1 .row span{display:block;white-space:nowrap;}
.anim .hero h1 .row span{animation:riseline .85s var(--ease) both;}
.anim .view-home.is-active .hero h1 .row:nth-child(1) span{animation-delay:.05s}
.anim .view-home.is-active .hero h1 .row:nth-child(2) span{animation-delay:.16s}
.anim .view-home.is-active .hero h1 .row:nth-child(3) span{animation-delay:.27s}
@keyframes riseline{from{transform:translateY(108%)}to{transform:none}}
.hero h1 em{font-style:normal;position:relative;color:var(--paper-strong);}
.hero h1 em .g1{transform:translate(4px,3px);} .hero h1 em .g2{transform:translate(-4px,-3px);}

.hero-lead{max-width:46ch;color:var(--paper);font-size:clamp(18px,1.5vw,21px);}
.hero-cta{display:flex;gap:16px;flex-wrap:wrap;margin-top:28px;align-items:center;}

/* overprint leitmotiv */
.overprint{position:relative;aspect-ratio:1/1.04;min-height:300px;}
.overprint .blob{position:absolute;border-radius:50%;mix-blend-mode:screen;
  filter:blur(2px);opacity:.7;color:#000;}
.overprint .b-a{width:62%;height:62%;left:2%;top:6%;
  background:radial-gradient(circle at 40% 40%,var(--ink-a),color-mix(in oklab,var(--ink-a) 30%,#000) 72%);
  -webkit-mask:radial-gradient(currentColor 1.4px,transparent 1.7px) 0 0/9px 9px;
          mask:radial-gradient(#000 1.4px,transparent 1.7px) 0 0/9px 9px;
  animation:drift1 26s var(--ease) infinite alternate;}
.overprint .b-b{width:60%;height:60%;right:0;top:0;
  background:radial-gradient(circle at 50% 45%,var(--ink-b),color-mix(in oklab,var(--ink-b) 26%,#000) 72%);
  -webkit-mask:radial-gradient(currentColor 1.4px,transparent 1.7px) 3px 2px/9px 9px;
          mask:radial-gradient(#000 1.4px,transparent 1.7px) 3px 2px/9px 9px;
  animation:drift2 30s var(--ease) infinite alternate;}
.overprint .b-c{width:58%;height:58%;left:18%;bottom:0;
  background:radial-gradient(circle at 50% 50%,var(--ink-c),color-mix(in oklab,var(--ink-c) 26%,#000) 72%);
  -webkit-mask:radial-gradient(currentColor 1.4px,transparent 1.7px) 1px 4px/9px 9px;
          mask:radial-gradient(#000 1.4px,transparent 1.7px) 1px 4px/9px 9px;
  animation:drift3 34s var(--ease) infinite alternate;}
@keyframes drift1{to{transform:translate(3%,2%) rotate(4deg)}}
@keyframes drift2{to{transform:translate(-3%,3%) rotate(-3deg)}}
@keyframes drift3{to{transform:translate(2%,-3%) rotate(3deg)}}
.overprint .label{position:absolute;font-family:var(--font-mono);font-size:11px;
  letter-spacing:.12em;text-transform:uppercase;color:var(--paper-strong);z-index:3;
  mix-blend-mode:normal;}
.overprint .l-a{left:-2%;top:30%;color:var(--ink-a);}
.overprint .l-b{right:-2%;top:12%;color:var(--ink-b);}
.overprint .l-c{left:14%;bottom:-3%;color:var(--ink-c);}
.overprint .core-i{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);
  font-family:var(--font-display);font-weight:800;font-size:clamp(34px,5vw,58px);
  color:var(--paper-strong);z-index:4;mix-blend-mode:normal;letter-spacing:-.03em;
  text-shadow:0 2px 24px rgba(0,0,0,.6);}

/* hero baseline ticker */
.hero-rule{display:flex;justify-content:space-between;gap:20px;margin-top:clamp(34px,5vw,64px);
  padding-top:18px;border-top:1px solid var(--ink-rule);font-family:var(--font-mono);
  font-size:12px;letter-spacing:.1em;text-transform:uppercase;color:var(--paper-muted);
  flex-wrap:wrap;position:relative;z-index:2;}
.hero-rule span b{color:var(--paper-strong);font-weight:500;}

@media (max-width:860px){
  .hero-grid{grid-template-columns:1fr;}
  .overprint{order:-1;max-width:420px;margin:0 auto;width:100%;}
  .hero h1 .row span{white-space:normal;}
}

/* ============================================================
   PILLARS  (01 / 02 / 03)
   ============================================================ */
.section{padding:clamp(56px,9vw,118px) 0;border-bottom:1px solid var(--ink-rule);}
.section-head{display:flex;justify-content:space-between;align-items:flex-end;gap:24px;
  margin-bottom:clamp(34px,5vw,60px);flex-wrap:wrap;}
.section-head h2{font-family:var(--font-display);font-weight:800;
  font-size:clamp(32px,5vw,64px);line-height:.95;letter-spacing:-.03em;margin:.25em 0 0;
  color:var(--paper-strong);max-width:16ch;}

.pillars{display:grid;gap:1px;background:var(--ink-rule);border:1px solid var(--ink-rule);}
@media(min-width:880px){.pillars{grid-template-columns:repeat(3,1fr);}}
.pillar{background:var(--ink-bg);padding:clamp(26px,3vw,40px);position:relative;
  overflow:hidden;transition:background .35s var(--ease);min-height:340px;
  display:flex;flex-direction:column;}
.pillar:hover{background:var(--ink-surface);}
.pillar .pn{font-family:var(--font-display);font-weight:800;font-size:clamp(56px,7vw,104px);
  line-height:.8;color:transparent;-webkit-text-stroke:1.4px var(--c,var(--ink-a));
  letter-spacing:-.03em;transition:.35s var(--ease);}
.pillar:hover .pn{color:var(--c,var(--ink-a));-webkit-text-stroke-color:var(--c);}
.pillar h3{font-family:var(--font-display);font-weight:700;font-size:clamp(23px,2.4vw,30px);
  letter-spacing:-.02em;margin:clamp(30px,3.4vw,48px) 0 .35em;color:var(--paper-strong);line-height:1.05;}
.pillar p{color:var(--paper);font-size:16.5px;margin:0;}
.pillar .ptag{font-family:var(--font-mono);font-size:11px;letter-spacing:.1em;
  text-transform:uppercase;color:var(--c,var(--ink-a));margin-top:auto;padding-top:24px;}
.pillar .flare{position:absolute;width:170px;height:170px;right:-40px;top:-40px;
  border-radius:50%;background:var(--c);opacity:.13;filter:blur(8px);
  -webkit-mask:radial-gradient(#000 1.3px,transparent 1.6px) 0 0/8px 8px;
          mask:radial-gradient(#000 1.3px,transparent 1.6px) 0 0/8px 8px;
  transition:.5s var(--ease);}
.pillar:hover .flare{transform:scale(1.25) translate(-10px,10px);opacity:.2;}
.pillar.p1{--c:var(--ink-a);} .pillar.p2{--c:var(--ink-b);} .pillar.p3{--c:var(--ink-c);}

/* pull quote band */
.quote{padding:clamp(56px,9vw,120px) 0;border-bottom:1px solid var(--ink-rule);
  position:relative;overflow:hidden;}
.quote blockquote{font-family:var(--font-display);font-weight:700;margin:0;
  font-size:clamp(30px,5.2vw,68px);line-height:1.02;letter-spacing:-.025em;
  color:var(--paper-strong);max-width:18ch;}
.quote blockquote .amp{color:var(--ink-a);}
.quote .qmeta{font-family:var(--font-mono);font-size:12px;letter-spacing:.12em;
  text-transform:uppercase;color:var(--paper-muted);margin-top:26px;}
.quote .bgamp{position:absolute;right:-3%;bottom:-22%;font-family:var(--font-display);
  font-weight:800;font-size:46vw;line-height:.7;color:transparent;
  -webkit-text-stroke:1.5px var(--ink-rule-soft);pointer-events:none;z-index:0;}
.quote .wrap{position:relative;z-index:1;}

/* ============================================================
   ABOUT / TIMELINE
   ============================================================ */
.page-head{padding:clamp(48px,7vw,96px) 0 clamp(36px,5vw,56px);border-bottom:1px solid var(--ink-rule);}
.page-head h1{font-family:var(--font-display);font-weight:800;
  font-size:clamp(44px,9vw,118px);line-height:.9;letter-spacing:-.035em;
  margin:.2em 0 .25em;color:var(--paper-strong);}
.page-head .lead{max-width:54ch;color:var(--paper);font-size:clamp(18px,1.5vw,21px);}

.about-grid{display:grid;grid-template-columns:.9fr 1.1fr;gap:clamp(28px,4vw,64px);
  align-items:start;padding:clamp(48px,7vw,90px) 0;border-bottom:1px solid var(--ink-rule);}
@media(max-width:820px){.about-grid{grid-template-columns:1fr;}}
.portrait-card{position:relative;}
.portrait-card .frame{position:relative;background:var(--ink-surface);
  border:1px solid var(--ink-rule);padding:18px;}
.portrait-card .duo{position:relative;overflow:hidden;background:var(--ink-bg);}
.portrait-card .duo img{width:100%;filter:grayscale(1) contrast(1.08) brightness(.95);
  mix-blend-mode:luminosity;}
.portrait-card .duo::before{content:"";position:absolute;inset:0;z-index:2;
  background:var(--ink-a);mix-blend-mode:multiply;opacity:.86;}
.portrait-card .duo::after{content:"";position:absolute;inset:0;z-index:3;
  background:var(--ink-c);mix-blend-mode:screen;opacity:.3;
  transform:translate(5px,4px);transition:transform .4s var(--ease);}
.portrait-card:hover .duo::after{transform:translate(-5px,-4px);}
.portrait-card .cap{font-family:var(--font-mono);font-size:11px;letter-spacing:.1em;
  text-transform:uppercase;color:var(--paper-muted);margin-top:12px;}
.portrait-card .stamp{position:absolute;right:-14px;bottom:30px;background:var(--ink-bg);z-index:5;}

.about-prose p{margin-bottom:1.1em;}
.about-prose p.big{font-size:clamp(20px,2vw,26px);line-height:1.4;color:var(--paper-strong);
  font-family:var(--font-display);font-weight:500;letter-spacing:-.01em;}

/* timeline */
.timeline{padding:clamp(48px,7vw,96px) 0;}
.tl-item{display:grid;grid-template-columns:minmax(120px,.34fr) 1fr;gap:clamp(18px,3vw,52px);
  padding:clamp(28px,4vw,52px) 0;border-top:1px solid var(--ink-rule);position:relative;}
.tl-item:first-child{border-top:0;}
.tl-year{font-family:var(--font-display);font-weight:800;
  font-size:clamp(30px,4.4vw,62px);line-height:.85;letter-spacing:-.03em;
  color:transparent;-webkit-text-stroke:1.3px var(--paper-faint);position:relative;}
.tl-item:hover .tl-year{color:var(--c,var(--ink-a));-webkit-text-stroke-color:var(--c,var(--ink-a));
  transition:.3s var(--ease);}
.tl-body h3{font-family:var(--font-display);font-weight:700;font-size:clamp(22px,2.6vw,32px);
  letter-spacing:-.02em;margin:.1em 0 .2em;color:var(--paper-strong);line-height:1.05;}
.tl-body .role{font-family:var(--font-mono);font-size:12px;letter-spacing:.08em;
  text-transform:uppercase;color:var(--c,var(--paper-muted));margin-bottom:1em;
  display:inline-block;}
.tl-body p{color:var(--paper);max-width:60ch;}
.tl-body a.lnk{color:var(--paper-strong);border-bottom:1.5px solid var(--c,var(--ink-a));
  padding-bottom:1px;transition:.2s var(--ease);}
.tl-body a.lnk:hover{color:var(--c,var(--ink-a));}
.tl-item.c1{--c:var(--ink-a);} .tl-item.c2{--c:var(--ink-b);} .tl-item.c3{--c:var(--ink-c);}
.tl-dom{font-family:var(--font-mono);font-size:10.5px;letter-spacing:.12em;text-transform:uppercase;
  color:var(--c);border:1px solid color-mix(in oklab,var(--c) 50%,transparent);
  padding:3px 9px;border-radius:20px;display:inline-block;margin-bottom:14px;}

/* ============================================================
   BLOG
   ============================================================ */
.blog-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(310px,1fr));
  gap:1px;background:var(--ink-rule);border:1px solid var(--ink-rule);
  margin:clamp(40px,6vw,72px) 0;}
.post{background:var(--ink-bg);padding:clamp(24px,2.6vw,34px);display:flex;
  flex-direction:column;gap:14px;min-height:300px;transition:background .3s var(--ease);
  position:relative;overflow:hidden;}
.post:hover{background:var(--ink-surface);}
.post .ptop{display:flex;justify-content:space-between;align-items:center;
  font-family:var(--font-mono);font-size:11px;letter-spacing:.08em;color:var(--paper-muted);}
.post .tag{color:var(--c,var(--ink-a));border:1px solid color-mix(in oklab,var(--c,var(--ink-a)) 45%,transparent);
  padding:3px 9px;border-radius:20px;text-transform:uppercase;}
.post h3{font-family:var(--font-display);font-weight:700;font-size:clamp(21px,2vw,27px);
  letter-spacing:-.02em;line-height:1.06;margin:auto 0 0;color:var(--paper-strong);
  transition:color .25s var(--ease);}
.post:hover h3{color:var(--c,var(--ink-a));}
.post p{font-size:15.5px;color:var(--paper);margin:0;}
.post .more{font-family:var(--font-mono);font-size:11px;letter-spacing:.1em;
  text-transform:uppercase;color:var(--paper-muted);display:flex;gap:8px;align-items:center;}
.post .more .ar{transition:transform .25s var(--ease);}
.post:hover .more{color:var(--c,var(--ink-a));}
.post:hover .more .ar{transform:translateX(5px);}
.post .hair{position:absolute;left:0;top:0;width:100%;height:3px;background:var(--c,var(--ink-a));
  transform:scaleX(0);transform-origin:left;transition:transform .35s var(--ease);}
.post:hover .hair{transform:scaleX(1);}
.post.c1{--c:var(--ink-a);} .post.c2{--c:var(--ink-b);} .post.c3{--c:var(--ink-c);}
.post.feat{grid-column:span 2;background:var(--ink-surface);}
@media(max-width:680px){.post.feat{grid-column:span 1;}}

/* ============================================================
   KONTAKT
   ============================================================ */
.contact{position:relative;overflow:hidden;}
.contact.fa-contact-pad{padding:clamp(48px,7vw,96px) 0 clamp(44px,6vw,84px);}
.contact .ovbg{position:absolute;inset:0;z-index:0;opacity:.5;}
.contact .ovbg .blob{filter:blur(40px);opacity:.5;}
.contact-grid{display:grid;grid-template-columns:1fr 1fr;gap:clamp(30px,5vw,72px);
  position:relative;z-index:1;align-items:start;}
@media(max-width:820px){.contact-grid{grid-template-columns:1fr;}}
.contact h1{font-family:var(--font-display);font-weight:800;
  font-size:clamp(40px,7vw,96px);line-height:.9;letter-spacing:-.035em;
  color:var(--paper-strong);margin:.1em 0 .35em;}
.contact .chan{margin-top:30px;display:flex;flex-direction:column;gap:2px;}
.contact .chan a{display:flex;justify-content:space-between;gap:16px;padding:16px 0;
  border-top:1px solid var(--ink-rule);font-family:var(--font-mono);font-size:13px;
  letter-spacing:.05em;color:var(--paper);transition:.2s var(--ease);align-items:center;}
.contact .chan a:last-child{border-bottom:1px solid var(--ink-rule);}
.contact .chan a:hover{color:var(--ink-a);padding-left:8px;}
.contact .chan a .k{color:var(--paper-muted);text-transform:uppercase;}

form{display:flex;flex-direction:column;gap:18px;background:var(--ink-surface);
  border:1px solid var(--ink-rule);padding:clamp(24px,3vw,38px);}
.field{display:flex;flex-direction:column;gap:7px;}
.field label{font-family:var(--font-mono);font-size:11px;letter-spacing:.1em;
  text-transform:uppercase;color:var(--paper-muted);}
.field input,.field textarea{background:var(--ink-bg);border:1px solid var(--ink-rule);
  color:var(--paper-strong);font-family:var(--font-body);font-size:17px;padding:13px 14px;
  transition:.2s var(--ease);resize:vertical;}
.field input:focus,.field textarea:focus{outline:none;border-color:var(--ink-a);
  box-shadow:0 0 0 3px color-mix(in oklab,var(--ink-a) 22%,transparent);}
.field textarea{min-height:120px;}
form .btn{align-self:flex-start;margin-top:4px;}
.form-note{font-family:var(--font-mono);font-size:11px;color:var(--paper-faint);
  letter-spacing:.04em;}

/* ============================================================
   IMPRESSUM
   ============================================================ */
.legal{padding:clamp(40px,6vw,80px) 0;max-width:74ch;}
.legal h2{font-family:var(--font-display);font-weight:700;font-size:clamp(20px,2.2vw,26px);
  letter-spacing:-.01em;color:var(--paper-strong);margin:2em 0 .5em;}
.legal h2:first-child{margin-top:0;}
.legal p{color:var(--paper);font-size:16.5px;}
.legal a{color:var(--ink-b);border-bottom:1px solid color-mix(in oklab,var(--ink-b) 40%,transparent);}

/* ---------- Footer ---------- */
.site-foot{padding:clamp(40px,6vw,70px) 0 50px;}
.foot-top{display:flex;justify-content:space-between;gap:30px;flex-wrap:wrap;
  align-items:flex-end;padding-bottom:30px;border-bottom:1px solid var(--ink-rule);}
.foot-top .fa{font-family:var(--font-display);font-weight:800;
  font-size:clamp(64px,15vw,200px);line-height:.78;letter-spacing:-.04em;
  color:var(--paper-strong);position:relative;}
.foot-top .fa .mis{position:absolute;inset:0;color:var(--ink-a);
  transform:translate(4px,3px);mix-blend-mode:screen;z-index:-1;}
.foot-links{display:flex;gap:26px;flex-wrap:wrap;}
.foot-links a{font-family:var(--font-mono);font-size:12px;letter-spacing:.08em;
  text-transform:uppercase;color:var(--paper-muted);transition:.2s var(--ease);}
.foot-links a:hover{color:var(--ink-a);}
.foot-bot{display:flex;justify-content:space-between;gap:20px;flex-wrap:wrap;
  margin-top:22px;font-family:var(--font-mono);font-size:11.5px;letter-spacing:.05em;
  color:var(--paper-faint);}

/* utility */
.lede-row{display:flex;gap:14px;align-items:center;flex-wrap:wrap;margin-bottom:18px;}
.hr-dot{flex:1;height:1px;background:repeating-linear-gradient(90deg,var(--ink-rule) 0 4px,transparent 4px 8px);}

/* ============================================================
   TYPO3 additions
   ============================================================ */

/* timeline range sub-label (was inline in the prototype) */
.tl-range{font-size:.42em;-webkit-text-stroke:0;color:var(--paper-faint);
  font-family:var(--font-mono);font-weight:400;letter-spacing:.05em;}

/* blog accent rotation — colours the EXT:news cards (which carry no cN class) */
.blog-grid .post:nth-child(3n+1){--c:var(--ink-a);}
.blog-grid .post:nth-child(3n+2){--c:var(--ink-b);}
.blog-grid .post:nth-child(3n+3){--c:var(--ink-c);}

/* ---- EXT:form — map the real form-framework markup onto the dark style ----
   TYPO3 wraps the form plugin in .frame-type-form_formframework. We target
   generic controls inside it, so it works regardless of the framework's
   internal wrapper class names. ---- */
.frame-type-form_formframework{background:var(--ink-surface);
  border:1px solid var(--ink-rule);padding:clamp(24px,3vw,38px);max-width:560px;}
/* the wrapper above is the box — neutralise the prototype's generic form box */
.frame-type-form_formframework form{background:none;border:0;padding:0;margin:0;
  display:block;gap:0;}
.frame-type-form_formframework legend{font-family:var(--font-display);font-weight:700;
  font-size:24px;color:var(--paper-strong);margin-bottom:14px;padding:0;border:0;}
.frame-type-form_formframework fieldset{border:0;margin:0;padding:0;}
.frame-type-form_formframework label{display:block;font-family:var(--font-mono);
  font-size:11px;letter-spacing:.1em;text-transform:uppercase;color:var(--paper-muted);
  margin-bottom:7px;}
.frame-type-form_formframework input[type=text],
.frame-type-form_formframework input[type=email],
.frame-type-form_formframework input[type=tel],
.frame-type-form_formframework input[type=number],
.frame-type-form_formframework input:not([type]),
.frame-type-form_formframework textarea,
.frame-type-form_formframework select{background:var(--ink-bg);
  border:1px solid var(--ink-rule);color:var(--paper-strong);font-family:var(--font-body);
  font-size:17px;padding:13px 14px;transition:.2s var(--ease);resize:vertical;width:100%;
  margin-bottom:18px;border-radius:0;}
.frame-type-form_formframework input::placeholder,
.frame-type-form_formframework textarea::placeholder{color:var(--paper-faint);}
.frame-type-form_formframework input:focus,
.frame-type-form_formframework textarea:focus,
.frame-type-form_formframework select:focus{outline:none;border-color:var(--ink-a);
  box-shadow:0 0 0 3px color-mix(in oklab,var(--ink-a) 22%,transparent);}
.frame-type-form_formframework textarea{min-height:120px;}
.frame-type-form_formframework .has-error input,
.frame-type-form_formframework input.error,
.frame-type-form_formframework .has-error textarea{border-color:var(--ink-a);}
.frame-type-form_formframework .help-block,
.frame-type-form_formframework .error,
.frame-type-form_formframework .text-danger,
.frame-type-form_formframework ul[role=alert] li{font-family:var(--font-mono);
  font-size:11px;color:var(--ink-a);letter-spacing:.03em;margin:-12px 0 16px;list-style:none;}
.frame-type-form_formframework button,
.frame-type-form_formframework input[type=submit]{display:inline-flex;align-items:center;
  gap:12px;font-family:var(--font-mono);font-size:13px;letter-spacing:.08em;
  text-transform:uppercase;padding:14px 22px;border:1.5px solid var(--ink-a);
  color:var(--paper-strong);background:transparent;cursor:pointer;transition:.22s var(--ease);
  border-radius:0;width:auto;margin:0;}
.frame-type-form_formframework button:hover,
.frame-type-form_formframework input[type=submit]:hover{background:var(--ink-a);
  color:var(--ink-bg);transform:translate(-2px,-2px);box-shadow:5px 5px 0 var(--ink-rule);}
/* confirmation / readonly message after submit */
.frame-type-form_formframework .form-element-readonly-text,
.frame-type-form_formframework p{color:var(--paper);}