/* ==========================================================================
   wg.css — Komponenten des Site-Designsystems „Nebel & Papier" (E3).
   Erwartet tokens.css (Variablen) + fonts.css (Familien) VOR dieser Datei.
   Quelle: claude-design-Scoping wg.css ab Z. 33 (+ Reset Z. 7).
   ========================================================================== */

*,*::before,*::after{ box-sizing:border-box; margin:0; padding:0; }

html{ -webkit-text-size-adjust:100%; scroll-behavior:smooth; }
body{ background:var(--paper); color:var(--ink); font-family:var(--ui); font-size:16px;
  line-height:1.55; -webkit-font-smoothing:antialiased; -moz-osx-font-smoothing:grayscale;
  transition:background .6s ease,color .6s ease; overflow-x:hidden; min-height:100vh; }
img{ display:block; max-width:100%; }
a{ color:inherit; text-decoration:none; }
::selection{ background:var(--accent); color:var(--paper); }

/* ---- TEXTUREN: Tapete (austauschbar) + Korn ---- */
.tapete{ position:fixed; inset:0; z-index:0; pointer-events:none;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cfilter id='t'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.7' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23t)'/%3E%3C/svg%3E");   /* eigenes Foto: img/tapete-placeholder.png ersetzen */
  background-repeat:repeat; background-size:var(--tapete-size) auto;
  opacity:var(--tapete-op); filter:grayscale(1) contrast(1.05); mix-blend-mode:multiply; }
.mode-dark .tapete{ mix-blend-mode:screen; }
.grain{ position:fixed; inset:0; z-index:9000; pointer-events:none; opacity:.05; mix-blend-mode:overlay;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='0.5'/%3E%3C/svg%3E"); }
.mode-dark .grain{ opacity:.09; }

/* ---- TYPE ---- */
.mono{ font-family:var(--mono); }
.serif{ font-family:var(--serif); }
.cap{ font-family:var(--mono); font-size:10.5px; letter-spacing:.18em; text-transform:uppercase; color:var(--ink-faint); }
.display{ font-family:var(--ui); font-weight:600; letter-spacing:-.035em; line-height:.9; }
.it{ font-style:italic; }

/* Lesbarkeits-Kontur: scharf, 0-Blur, in Hintergrundfarbe — auf Weiß unsichtbar, über Bildern umrandend */
.halo :is(h1,h2,h3,h4,h5,h6,p,.cap,.lede,figcaption,li,.kicker){
  text-shadow:1px 0 0 var(--halo),-1px 0 0 var(--halo),0 1px 0 var(--halo),0 -1px 0 var(--halo),
              1px 1px 0 var(--halo),-1px -1px 0 var(--halo),1px -1px 0 var(--halo),-1px 1px 0 var(--halo); }

/* ---- LAYOUT ---- */
.wrap{ max-width:var(--maxw); margin-inline:auto; padding-inline:var(--pad); }
section{ position:relative; z-index:1; }

/* ---- HEADER ---- */
.topbar{ position:sticky; top:0; z-index:8000; border-bottom:1px solid var(--rule);
  background:color-mix(in srgb,var(--paper) 88%,transparent); backdrop-filter:blur(7px); -webkit-backdrop-filter:blur(7px);
  transition:background .6s ease; }
.topbar .wrap{ display:flex; align-items:center; gap:24px; height:62px; }
.brand{ display:flex; align-items:center; gap:10px; }
.brand .sq{ width:11px; height:11px; background:var(--accent); }
.brand b{ font-family:var(--mono); font-size:14px; font-weight:700; letter-spacing:.01em; }
.nav{ display:none; margin-left:auto; gap:26px; }
@media(min-width:760px){ .nav{ display:flex; } }
.nav a{ font-family:var(--mono); font-size:11.5px; letter-spacing:.12em; text-transform:uppercase; color:var(--ink-soft); padding:6px 0; border-bottom:1px solid transparent; transition:.18s; }
.nav a:hover{ color:var(--accent); border-color:var(--accent); }
.toggle{ display:flex; border:1px solid var(--hairline); margin-left:auto; }
@media(min-width:760px){ .toggle{ margin-left:0; } }
.toggle button{ font-family:var(--mono); font-size:10.5px; letter-spacing:.14em; text-transform:uppercase;
  background:transparent; border:none; color:var(--ink-soft); padding:7px 12px; cursor:pointer; transition:.2s; }
.toggle button[aria-pressed="true"]{ background:var(--ink); color:var(--paper); }

/* ---- HERO / VISITENKARTE ---- */
.hero{ position:relative; overflow:hidden; display:flex; align-items:center;
  min-height:clamp(540px,84vh,880px); padding-block:clamp(48px,8vh,96px); border-bottom:1px solid var(--rule); }
.hero-bleed{ position:absolute; top:0; right:0; bottom:0; left:auto; width:min(66%,1080px); z-index:0; }
.hero-bleed img{ width:100%; height:100%; object-fit:cover; display:block; }
.hero::before{ content:""; position:absolute; inset:0; z-index:1; pointer-events:none;
  background:linear-gradient(90deg, var(--paper) 0%, var(--paper) 12%, color-mix(in srgb,var(--paper) 50%,transparent) 30%, transparent 52%); }
/* Cav-Empt-artiger Schnitt: Papier-Scanlines fransen die linke Bildkante in Streifen auf */
.hero::after{ content:""; position:absolute; inset:0; z-index:2; pointer-events:none;
  background:repeating-linear-gradient(0deg, var(--paper) 0 2.5px, transparent 2.5px 6px);
  -webkit-mask-image:linear-gradient(90deg,#000 0%,#000 28%,transparent 60%);
  mask-image:linear-gradient(90deg,#000 0%,#000 28%,transparent 60%); }
.hero-text{ position:relative; z-index:5; width:100%; }
@media(max-width:820px){
  .hero{ align-items:flex-start; min-height:clamp(500px,86vh,760px); }
  .hero-bleed{ width:100%; }
  .hero::before{ background:linear-gradient(180deg, var(--paper) 0%, color-mix(in srgb,var(--paper) 58%,transparent) 36%, transparent 72%); }
  .hero::after{ background:repeating-linear-gradient(0deg, var(--paper) 0 2.5px, transparent 2.5px 6px);
    -webkit-mask-image:linear-gradient(180deg,#000 0%,#000 24%,transparent 56%);
    mask-image:linear-gradient(180deg,#000 0%,#000 24%,transparent 56%); }
}
.kicker{ font-family:var(--mono); font-size:11px; letter-spacing:.14em; text-transform:uppercase; color:var(--ink-faint); }
.hero h1{ font-family:var(--ui); font-weight:600; letter-spacing:-.035em; line-height:.9;
  font-size:clamp(44px,8vw,108px); margin:.2em 0 .4em; }
.hero h1 .soft{ color:var(--ink-soft); font-weight:400; }
.lede{ font-family:var(--mono); font-style:normal; font-weight:400; color:var(--ink-soft);
  font-size:clamp(14px,1.55vw,18px); letter-spacing:.03em; line-height:1.5; max-width:42ch; }
.intro{ font-family:var(--serif); font-weight:400; font-size:17px; line-height:1.62; max-width:46ch; margin-top:1.1em; }
.meta{ margin-top:24px; display:flex; flex-wrap:wrap; gap:8px 12px; }
.tag{ font-family:var(--mono); font-size:11px; letter-spacing:.04em; color:var(--ink); padding:3px 8px; border:1px solid var(--rule); display:inline-block; transition:.15s; }
.tag.dashed{ border-style:dashed; }
.tag:hover{ border-color:var(--accent); color:var(--accent); }

/* ---- BILDGERÄT: Rahmenbruch (fixer Rahmen, Bild läuft darüber hinaus) ---- */
.wg-frame{ position:relative; isolation:isolate; }
.wg-frame .ghost{ position:absolute; inset:16px -16px -16px 16px; border:1px solid var(--hairline); z-index:0; pointer-events:none; }
.hero-fig img{ width:100%; height:clamp(300px,46vh,460px); object-fit:cover; display:block; }
.wg-frame .shot{ position:relative; z-index:1; display:block; width:100%; }
.wg-frame img.shot{ object-fit:cover; }
.hero-fig .shot{ width:100%; height:clamp(300px,46vh,460px); object-fit:cover; }
.mono-img{ filter:grayscale(1) contrast(1.28) brightness(1.0); }

/* ---- GATEWAYS ---- */
.block{ padding-block:clamp(46px,8vh,96px); }
.block > .wrap > .cap{ display:block; margin-bottom:26px; }
.gw-grid{ display:grid; grid-template-columns:1fr; gap:1px; background:var(--rule); border:1px solid var(--rule); }
@media(min-width:720px){ .gw-grid{ grid-template-columns:repeat(3,1fr); } }
.gw{ background:var(--paper); padding:clamp(20px,2.4vw,30px); display:flex; flex-direction:column; gap:16px; transition:background .2s; }
.gw:hover{ background:var(--paper-2); }
.gw .thumb{ width:100%; height:170px; object-fit:cover; }
.gw h3{ font-family:var(--ui); font-weight:600; font-size:23px; letter-spacing:-.02em; }
.gw p{ font-family:var(--serif); font-size:15.5px; line-height:1.5; color:var(--ink-soft); flex:1; }
.gw .go{ font-family:var(--mono); font-size:11px; letter-spacing:.12em; text-transform:uppercase; color:var(--accent); }

/* ---- NOTIZEN / BLOG-TEASER ---- */
.note-list{ list-style:none; border-top:1px solid var(--rule); }
.note-list li a{ display:grid; grid-template-columns:96px 1fr auto; gap:16px; align-items:baseline;
  padding:18px 0; border-bottom:1px solid var(--rule); transition:.18s; }
.note-list li a:hover{ padding-left:8px; color:var(--accent); }
.note-list .date{ font-family:var(--mono); font-size:11px; letter-spacing:.06em; color:var(--ink-faint); }
.note-list .ntitle{ font-family:var(--serif); font-size:19px; }
.note-list .nt{ font-family:var(--mono); font-size:10px; letter-spacing:.1em; text-transform:uppercase; color:var(--ink-faint); }
@media(max-width:600px){ .note-list li a{ grid-template-columns:1fr; gap:4px; } .note-list .nt{ display:none; } }

/* ---- FOOTER ---- */
.foot{ border-top:1px solid var(--rule); padding-block:30px; display:flex; flex-wrap:wrap; gap:14px 28px; justify-content:space-between; align-items:baseline; }
.foot .fmark{ font-family:var(--mono); font-weight:700; font-size:13px; }
.foot .fline{ font-family:var(--mono); font-size:11px; letter-spacing:.04em; color:var(--ink-soft); display:flex; flex-wrap:wrap; gap:14px; }
.foot .fline a:hover{ color:var(--accent); }

/* ---- BLOG-INDEX ---- */
.lede-post{ border-bottom:1px solid var(--rule); padding-bottom:clamp(34px,5vh,56px); margin-bottom:clamp(34px,5vh,56px); }
.lede-post a{ display:grid; grid-template-columns:1fr; gap:clamp(20px,3vw,40px); align-items:end; }
@media(min-width:860px){ .lede-post a{ grid-template-columns:1fr 1fr; } }
.lede-post .lp-media{ position:relative; overflow:hidden; aspect-ratio:4/3; background:var(--paper-2); }
.lede-post .lp-media img{ width:100%; height:100%; object-fit:cover; display:block; transition:transform .5s ease; }
.lede-post a:hover .lp-media img{ transform:scale(1.03); }
.lede-post .lp-meta{ display:flex; gap:14px; align-items:baseline; margin-bottom:14px; }
.lede-post h2{ font-family:var(--ui); font-weight:600; font-size:clamp(28px,4vw,46px); letter-spacing:-.03em; line-height:1; }
.lede-post .lp-stand{ font-family:var(--serif); font-style:italic; font-weight:400; color:var(--ink-soft); font-size:18px; line-height:1.45; margin-top:.7em; max-width:42ch; }

.post-list{ list-style:none; }
.post-list li{ border-bottom:1px solid var(--rule); }
.post-list li:first-child{ border-top:1px solid var(--rule); }
.post-list a{ display:grid; grid-template-columns:104px 1fr auto; gap:20px; align-items:baseline; padding:clamp(18px,2.4vw,26px) 0; transition:.18s; }
.post-list a:hover{ padding-left:10px; }
.post-list a:hover .pt{ color:var(--accent); }
.post-list .pd{ font-family:var(--mono); font-size:11px; letter-spacing:.06em; color:var(--ink-faint); }
.post-list .pt{ font-family:var(--serif); font-size:clamp(19px,2.1vw,25px); line-height:1.2; transition:color .18s; }
.post-list .ps{ font-family:var(--serif); font-style:italic; color:var(--ink-soft); font-size:15px; margin-top:5px; max-width:54ch; }
.post-list .pk{ font-family:var(--mono); font-size:10px; letter-spacing:.1em; text-transform:uppercase; color:var(--ink-faint); white-space:nowrap; }
@media(max-width:640px){ .post-list a{ grid-template-columns:1fr; gap:6px; } .post-list .pk{ display:none; } }

/* ---- ARTIKEL ---- */
.article-head{ padding-top:clamp(56px,11vh,130px); padding-bottom:clamp(28px,5vh,52px); }
.article-head .a-meta{ display:flex; flex-wrap:wrap; gap:12px 16px; align-items:baseline; margin-bottom:22px; }
.article-title{ font-family:var(--ui); font-weight:600; letter-spacing:-.035em; line-height:.96; font-size:clamp(34px,6vw,76px); max-width:18ch; }
.article-stand{ font-family:var(--serif); font-style:italic; font-weight:400; color:var(--ink-soft); font-size:clamp(19px,2.3vw,27px); line-height:1.4; max-width:40ch; margin-top:.6em; }
.article-lead-media{ margin-block:clamp(24px,4vh,44px); }
.article-lead-media img{ width:100%; max-height:64vh; object-fit:cover; display:block; }
.article-lead-media figcaption{ font-family:var(--mono); font-size:10.5px; letter-spacing:.04em; color:var(--ink-faint); margin-top:10px; }
.article-body{ padding-bottom:clamp(50px,9vh,110px); }
.article-body .prose{ margin-inline:auto; }
.article-body .prose > p:first-of-type::first-letter{ font-family:var(--serif); font-weight:500; float:left; font-size:3.4em; line-height:.82; padding:.05em .12em 0 0; }
.pull{ font-family:var(--serif); font-style:italic; font-weight:400; font-size:clamp(22px,2.8vw,32px); line-height:1.3; color:var(--ink); border-left:2px solid var(--accent); padding-left:24px; margin:1.6em 0; max-width:30ch; }
.article-figure{ margin:1.8em 0; }
.article-figure img{ width:100%; display:block; }
.article-figure figcaption{ font-family:var(--mono); font-size:10.5px; letter-spacing:.04em; color:var(--ink-faint); margin-top:10px; }

/* ---- INNER PAGES: Kopf + Lesespalte (Über, Blog-Artikel) ---- */
main{ display:block; }
.page-head{ padding-top:clamp(64px,13vh,150px); padding-bottom:clamp(26px,5vh,52px); }
.page-head .cap{ display:block; margin-bottom:18px; }
.page-title{ font-family:var(--ui); font-weight:600; letter-spacing:-.035em; line-height:.92; font-size:clamp(40px,7vw,92px); }
.page-stand{ font-family:var(--serif); font-style:italic; font-weight:400; color:var(--ink-soft);
  font-size:clamp(19px,2.2vw,26px); line-height:1.4; max-width:36ch; margin-top:.55em; }

.about{ display:grid; grid-template-columns:1fr; gap:clamp(34px,5vw,64px); align-items:start;
  padding-bottom:clamp(56px,10vh,120px); }
@media(min-width:900px){ .about{ grid-template-columns:1.4fr .6fr; } }
.prose{ font-family:var(--serif); font-size:18px; line-height:1.66; color:var(--ink); max-width:62ch;
  text-align:justify; text-justify:inter-word; hyphens:auto; -webkit-hyphens:auto; }
.prose p+p{ margin-top:1.1em; }
.prose h2{ font-family:var(--ui); font-weight:600; font-size:clamp(20px,2.4vw,27px); letter-spacing:-.01em; margin:1.9em 0 .5em; }
.prose a{ color:var(--accent); border-bottom:1px solid var(--rule); }
.prose a:hover{ border-color:var(--accent); }
.about-aside{ display:flex; flex-direction:column; gap:24px; }
@media(min-width:900px){ .about-aside{ position:sticky; top:84px; } }
.about-aside image-slot{ width:100%; aspect-ratio:4/5; }
.hero-credit{ font-family:var(--mono); font-size:10.5px; letter-spacing:.06em; color:var(--ink-faint); margin-top:18px; }
.bleed-credit{ position:absolute; right:12px; bottom:10px; z-index:3;
  font-family:var(--mono); font-size:10px; letter-spacing:.06em; color:#e9e6dc; text-shadow:0 1px 3px rgba(0,0,0,.55); }
.hero--kind{ min-height:clamp(420px,62vh,640px); align-items:center; }
.hero--kind .hero-bleed{ overflow:hidden; top:50%; bottom:auto; transform:translateY(-50%);
  width:50%; height:clamp(340px,32vw,500px); }
.hero--kind .hero-text{ padding-top:clamp(26px,5vh,60px); padding-bottom:clamp(26px,5vh,60px); display:flex; }
.hero--kind .prose{ max-width:min(52ch,46%); }
.hero--kind .hero-bleed img{ height:100%; object-fit:cover; object-position:center center; transform:none; }
@media(max-width:820px){
  .hero--kind .prose{ max-width:62ch; }
}
.hero--portrait .hero-bleed img{ object-position:50% 18%; }
.block .about{ padding-bottom:0; }
.about-aside figure img{ width:100%; height:auto; display:block; }
.portrait{ padding:12px; border:1px solid var(--rule);
  background:var(--paper-2) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cfilter id='t'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.7' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23t)'/%3E%3C/svg%3E"); background-size:130px auto; background-blend-mode:overlay; }
.portrait img{ width:100%; display:block; }
.portrait figcaption{ font-family:var(--mono); font-size:10px; letter-spacing:.06em; color:var(--ink-faint); margin-top:9px; }
.contact .cap{ display:block; margin-bottom:10px; }
.contact a{ display:block; font-family:var(--mono); font-size:13px; color:var(--ink); padding:4px 0; border-bottom:1px solid var(--rule); }
.contact a:hover{ color:var(--accent); }

/* ---- image-slot defaults ---- */
image-slot{ display:block; background:var(--mat); border:1px solid var(--rule); }