@font-face{font-family:'Young Serif';font-style:normal;font-weight:400;font-display:swap;src:url(fonts/young-serif-latin-400-normal.woff2) format('woff2')}
@font-face{font-family:'Libre Baskerville';font-style:normal;font-weight:400;font-display:swap;src:url(fonts/libre-baskerville-latin-400-normal.woff2) format('woff2')}
@font-face{font-family:'Libre Baskerville';font-style:italic;font-weight:400;font-display:swap;src:url(fonts/libre-baskerville-latin-400-italic.woff2) format('woff2')}
@font-face{font-family:'Libre Baskerville';font-style:normal;font-weight:700;font-display:swap;src:url(fonts/libre-baskerville-latin-700-normal.woff2) format('woff2')}

/* Klickbarer Prototyp: Worte hell und weit, Arbeit still und warm, je ein festes Zeichen pro Ebene unten rechts. */
:root {
  --bg:#efebe3; --paper:#f7f5f0; --ink:#2c2a27; --mute:#6c675f; --line:#d3ccbf; --wash:#7a7872; --wash2:#b9a98c; --clay:#a4553a;
  --a-paper:#f3ede2; --a-line:#d9cdb8;
  --f-title:'Young Serif',Georgia,serif; --f-body:'Libre Baskerville',Georgia,'Times New Roman',serif;
  --m-kerbel:url(sil/kerbel.svg); --m-aehre:url(sil/aehre.svg); --m-oregano:url(sil/oregano.svg); --m-blau:url(sil/blau.svg); --mi-kerbel:url(sil/kerbel_i.svg); --mi-aehre:url(sil/aehre_i.svg); --mi-oregano:url(sil/oregano_i.svg); --mi-blau:url(sil/blau_i.svg);
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) { --bg:#100f0e; --paper:#161514; --ink:#ece8e0; --mute:#a29d94; --line:#2e2c29; --wash:#34322f; --wash2:#2a2622; --clay:#d88a62; --a-paper:#1b1815; --a-line:#312b24; color-scheme:dark }
}
:root[data-theme="dark"] { --bg:#100f0e; --paper:#161514; --ink:#ece8e0; --mute:#a29d94; --line:#2e2c29; --wash:#34322f; --wash2:#2a2622; --clay:#d88a62; --a-paper:#1b1815; --a-line:#312b24; color-scheme:dark }

* { box-sizing:border-box }
body { background:var(--bg); color:var(--ink); font-family:var(--f-body); padding-inline:16px; padding-block:14px 48px; line-height:1.6 }
a { color:inherit }
.sr { position:absolute; width:0; height:0; overflow:hidden }
.proto { max-width:1040px; margin:0 auto 12px; display:flex; flex-wrap:wrap; justify-content:space-between; align-items:center; gap:6px 16px; font-size:.74rem; color:var(--mute) }
.tg { font:inherit; font-size:.74rem; color:var(--ink); background:none; border:1px solid var(--line); border-radius:99px; padding:4px 12px; cursor:pointer }

.site { position:relative; isolation:isolate; max-width:1040px; margin-inline:auto; min-height:82vh; border:1px solid var(--line); background:var(--paper); display:flex; flex-direction:column; overflow:hidden }
.site[data-area="arbeit"] { background:var(--a-paper); border-color:var(--a-line) }
.ground { position:absolute; inset:0; width:100%; height:100%; z-index:-1; pointer-events:none; transition:opacity .3s }
.site[data-area="arbeit"] .ground { opacity:.35 }

.hd { display:flex; flex-wrap:wrap; justify-content:space-between; align-items:baseline; gap:6px 22px; padding:22px 30px 0; position:relative; z-index:5 }
.hd .n { font-style:italic; font-size:1.02rem; text-decoration:none }
.hd .l { display:flex; flex-wrap:wrap; gap:4px 22px; font-size:.84rem; color:var(--mute) }
.hd .l a { text-decoration:none; padding-bottom:2px; border-bottom:1px solid transparent }
.hd .l a:hover { color:var(--ink) }
.hd .l a[aria-current] { color:var(--ink); border-color:var(--ink) }
.mb { display:none; font:inherit; font-size:.82rem; color:var(--ink); background:none; border:0; border-bottom:1px solid var(--ink); padding:2px 0; cursor:pointer }
.sub { display:flex; flex-wrap:wrap; gap:6px 24px; padding:16px 30px 0; font-size:.84rem; color:var(--mute); position:relative; z-index:4 }
.sub:empty { display:none }
.sub a { display:inline-flex; align-items:center; gap:8px; text-decoration:none; padding-bottom:2px; border-bottom:1px solid transparent }
.sub a[aria-current] { color:var(--ink); border-color:var(--ink) }
.sub a:hover { color:var(--ink) }
.ic { position:relative; width:22px; height:22px; flex:none; color:var(--ink); display:inline-block }
.ic svg { width:100%; height:100%; display:block }

main { flex:1; position:relative; padding:46px 30px 30px; outline:none; display:flex; flex-direction:column }
.page { position:relative; flex:1; display:flex; flex-direction:column; gap:30px; min-height:56vh }
h1,h2 { font-family:var(--f-title); font-weight:400; margin:0; text-wrap:balance }
.big { font-size:clamp(2.6rem,9vw,5.4rem); line-height:.96; letter-spacing:-.01em }
.lead { margin:0; color:var(--mute); font-size:1rem; max-width:44ch; line-height:1.8 }
.cap { font-size:.7rem; letter-spacing:.16em; text-transform:uppercase; color:var(--mute); margin:0 }
.flag { display:inline-block; font-size:.66rem; letter-spacing:.1em; text-transform:uppercase; color:var(--mute); border:1px solid var(--line); border-radius:99px; padding:1px 9px; margin-left:8px; vertical-align:middle }

.mk { position:absolute; right:0; bottom:0; width:120px; height:150px; pointer-events:none; color:var(--ink) }
.mk.sm { width:64px; height:80px }
.mk.sq { height:120px }
.mk.sq.sm { height:64px }
.mk svg { width:100%; height:100%; display:block }
.sil { background:currentColor; -webkit-mask:var(--m) center bottom/contain no-repeat; mask:var(--m) center bottom/contain no-repeat; display:block; width:100%; height:100% }
.bridge { position:absolute; inset:0 }
.bridge .sil { position:absolute; left:32%; bottom:13%; width:40%; height:84%; z-index:1 }
.bridge svg { position:absolute; left:0; bottom:0; width:100%; height:34%; z-index:2 }

/* Start */
.doors { display:grid; grid-template-columns:1fr 1fr; gap:0; border-top:1px solid var(--line); margin-inline:-30px; margin-bottom:-30px; flex:1 }
.door { position:relative; display:flex; flex-direction:column; gap:10px; padding:30px 30px 30px; min-height:300px; text-decoration:none; overflow:hidden }
.door + .door { border-left:1px solid var(--line); background:var(--a-paper) }
.door h2 { font-size:clamp(2rem,5vw,3rem); line-height:1 }
.door p { margin:0; color:var(--mute); font-size:.9rem; max-width:30ch }
.door .mk { right:26px; bottom:18px; width:130px; height:170px }
.door:hover h2 { text-decoration:underline; text-decoration-thickness:1px; text-underline-offset:6px }
.recent { display:flex; flex-direction:column; gap:6px; max-width:46ch }
.recent a { text-decoration:none; font-size:.92rem; color:var(--mute) }
.recent a:hover { color:var(--ink) }

/* Listen */
.rows { display:flex; flex-direction:column; border-top:1px solid var(--line); max-width:640px }
.row { display:grid; grid-template-columns:44px minmax(0,1fr); gap:6px 16px; align-items:center; padding:18px 0; border-bottom:1px solid var(--line); text-decoration:none }
.row .ic { width:34px; height:34px }
.fgh .ic { width:28px; height:28px }
.row h3 { margin:0; font-family:var(--f-title); font-weight:400; font-size:1.3rem }
.row p { margin:2px 0 0; color:var(--mute); font-size:.86rem }
.row:hover h3 { text-decoration:underline; text-decoration-thickness:1px; text-underline-offset:5px }
.chips { display:flex; flex-wrap:wrap; gap:8px }
.chip { font:inherit; font-size:.8rem; color:var(--mute); background:none; border:1px solid var(--line); border-radius:99px; padding:4px 14px; cursor:pointer }
.chip[aria-pressed="true"] { color:var(--ink); border-color:var(--ink) }
.shorties { display:flex; flex-direction:column; max-width:34rem; padding-block:clamp(16px,4vw,40px); border-top:1px solid var(--line) }
.shorties a { display:flex; justify-content:space-between; gap:16px; align-items:baseline; text-decoration:none; font-family:var(--f-title); font-size:clamp(1.1rem,2.6vw,1.35rem); line-height:1.5; padding:22px 4px; border-bottom:1px solid var(--line) }
.shorties a::after { content:'→'; color:var(--mute); font-family:var(--f-body); font-size:.9rem }
.shorties a:hover { background:color-mix(in srgb,var(--fg) 4%,transparent) }
.shorties .n { display:block; margin-top:14px; font:.68rem/1 inherit; letter-spacing:.12em; text-transform:uppercase; color:var(--mute) }
.haikus { display:grid; grid-template-columns:repeat(auto-fill,minmax(min(100%,250px),1fr)); gap:clamp(20px,4vw,40px) clamp(20px,4vw,40px); padding-block:clamp(16px,4vw,40px) }
.haikus a { display:flex; flex-direction:column; justify-content:center; text-decoration:none; white-space:pre-line; min-height:7rem; padding:28px 24px; border:1px solid var(--line); border-radius:4px; line-height:1.85; font-size:1.02rem }
.haikus a:hover { border-color:var(--fg) }
.cform { display:flex; flex-direction:column; gap:14px; max-width:30rem; margin-top:8px }
.cform label { display:flex; flex-direction:column; gap:6px; font-size:.8rem; letter-spacing:.06em; text-transform:uppercase; color:var(--mute) }
.cform input, .cform textarea { font:inherit; font-size:1rem; letter-spacing:0; text-transform:none; color:var(--ink); background:transparent; border:1px solid var(--line); border-radius:4px; padding:12px 14px; width:100%; min-width:0 }
.cform textarea { min-height:9rem; resize:vertical }
.cform input:focus, .cform textarea:focus { outline:2px solid var(--clay); outline-offset:1px }
.cform button { align-self:flex-start; font:inherit; font-size:.95rem; color:var(--ink); background:transparent; border:1px solid var(--ink); border-radius:999px; padding:10px 22px; cursor:pointer }
.cform button:hover { background:color-mix(in srgb,var(--ink) 8%,transparent) }
.cform .hp { position:absolute; left:-9999px }
.cform .note, .cmsg { font-size:.82rem; color:var(--mute); margin:0 }
.plist { list-style:none; margin:0; padding:0; max-width:640px; border-top:1px solid var(--line) }
.plist li a { display:grid; grid-template-columns:minmax(0,1fr) auto; gap:4px 16px; padding:16px 0; border-bottom:1px solid var(--line); text-decoration:none; align-items:baseline }
.plist .t { font-size:1rem }
.plist .s { grid-column:1; color:var(--mute); font-size:.82rem; white-space:nowrap; overflow:hidden; text-overflow:ellipsis }
.plist .k { font-size:.68rem; letter-spacing:.12em; text-transform:uppercase; color:var(--mute); grid-column:2; grid-row:1 }
.plist a:hover .t { text-decoration:underline; text-decoration-thickness:1px; text-underline-offset:4px }

/* Lesen */
.read { max-width:34rem; display:flex; flex-direction:column; gap:26px }
.read h1 { font-size:clamp(1.9rem,6vw,3rem); line-height:1.05 }
.poem { margin:0; font-family:var(--f-body); font-size:1.08rem; line-height:2; white-space:pre-wrap; overflow-wrap:anywhere }
.poem.big-p { font-size:1.25rem }
.prose p { margin:0 0 1.1em; font-size:1rem; line-height:1.9 }
.sign { display:flex; gap:14px; flex-wrap:wrap; align-items:baseline; font-size:.8rem; color:var(--mute) }
.sign i { font-style:italic; color:var(--ink) }
.pn { display:flex; justify-content:space-between; gap:16px; max-width:34rem; font-size:.84rem; color:var(--mute) }
.pn a { text-decoration:none } .pn a:hover { color:var(--ink) }
.hand { display:flex; flex-wrap:wrap; gap:8px 24px; margin-top:4px; font-size:.92rem }
.hand a { padding-bottom:3px; border-bottom:1px solid var(--clay); text-decoration:none }
.stack { display:flex; flex-direction:column; gap:22px; max-width:34rem }
.stack p { margin:0; line-height:1.9 }
.fmts { display:flex; flex-direction:column; border-top:1px solid var(--line); max-width:40rem }
.fmt { padding:20px 0; border-bottom:1px solid var(--line); display:flex; flex-direction:column; gap:6px }
.fgh { display:flex; align-items:center; gap:12px; margin:28px 0 -2px; font-family:var(--f-body); font-weight:400; font-size:.72rem; letter-spacing:.16em; text-transform:uppercase; color:var(--mute) }
.fmt h3 { margin:0; font-family:var(--f-title); font-weight:400; font-size:1.3rem }
.fmt .meta { font-size:.74rem; letter-spacing:.1em; text-transform:uppercase; color:var(--mute) }
.fmt p { margin:0; font-size:.94rem; line-height:1.8 }
.lists { margin:0; padding-left:1.1em; font-size:.94rem; line-height:1.9 }
.folders { display:grid; grid-template-columns:repeat(auto-fill,minmax(210px,1fr)); gap:14px; max-width:700px }
.folder { position:relative; display:flex; flex-direction:column; gap:8px; padding:22px 18px 16px; border:1px solid var(--line); border-radius:3px 12px 3px 3px; text-decoration:none; min-height:128px }
.folder::before { content:""; position:absolute; top:-7px; left:-1px; width:44px; height:7px; border:1px solid var(--line); border-bottom:0; border-radius:4px 4px 0 0; background:var(--paper) }
.folder:hover { border-color:var(--ink) }
.folder h3 { margin:0; font-family:var(--f-title); font-weight:400; font-size:1.25rem }
.folder .n { font-size:.7rem; letter-spacing:.12em; text-transform:uppercase; color:var(--mute) }
.folder p { margin:0; font-size:.84rem; color:var(--mute); line-height:1.6 }
.fgroup { display:flex; flex-direction:column; gap:20px }
.back { font-size:.84rem; color:var(--mute); text-decoration:none } .back:hover { color:var(--ink) }
.toc { margin:0; padding-left:1.4em; font-size:.94rem; line-height:2; columns:2 15rem }
.about { display:grid; grid-template-columns:minmax(0,1fr) minmax(220px,320px); gap:56px; align-items:start; max-width:64rem }
.ph { margin:0; display:flex; flex-direction:column; gap:8px }
.ph img { width:100%; height:auto; display:block; border-radius:2px; filter:saturate(.9) }
.ph figcaption { font-size:.72rem; letter-spacing:.1em; text-transform:uppercase; color:var(--mute) }
@media (max-width:760px) { .about { grid-template-columns:minmax(0,1fr); gap:28px } .about .ph { order:-1; max-width:300px } }
.hero { display:grid; grid-template-columns:minmax(0,1fr) minmax(200px,300px); gap:40px; align-items:start; margin-bottom:28px }
.hero .ph img { aspect-ratio:4/5; object-fit:cover }
.phs { display:flex; flex-direction:column; gap:28px }
@media (max-width:760px) { .hero { grid-template-columns:minmax(0,1fr); gap:24px } .hero .ph { max-width:260px } .about .phs { order:-1; max-width:300px } }
.line2 { margin:0; font-family:var(--f-title); font-size:clamp(1.15rem,2.6vw,1.6rem); line-height:1.25; max-width:24ch }
.proof { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:18px 32px; border-top:1px solid var(--line); padding-block:22px; margin-bottom:28px; font-size:.84rem; color:var(--mute); line-height:1.6 }
.proof-h { grid-column:1/-1 }
.proof p { margin:0; display:flex; flex-direction:column; gap:4px }
@media (max-width:760px) { .proof { grid-template-columns:minmax(0,1fr) } }
.rel { border-top:1px solid var(--line); padding-top:18px; max-width:34rem; display:flex; flex-direction:column; gap:8px; font-size:.9rem; color:var(--mute) }

.home { position:fixed; right:max(16px,env(safe-area-inset-right)); bottom:max(16px,env(safe-area-inset-bottom)); z-index:20; width:48px; height:48px; border-radius:50%; background:var(--ink); color:var(--bg); display:grid; place-items:center; box-shadow:0 2px 10px rgba(0,0,0,.25); opacity:.88; transition:opacity .2s }
.home:hover, .home:focus-visible { opacity:1 }
.home svg { width:22px; height:22px; fill:none; stroke:currentColor; stroke-width:1.8; stroke-linecap:round; stroke-linejoin:round }
.ft { border-top:1px solid var(--line); display:flex; flex-wrap:wrap; justify-content:space-between; gap:6px 18px; padding:16px 30px 20px; font-size:.74rem; color:var(--mute); position:relative; z-index:3 }
.ft a { text-decoration:none } .ft a:hover { color:var(--ink) }

@media (max-width:680px) {
  .hd { flex-wrap:nowrap; align-items:center; padding:16px 18px 0; position:relative }
  .hd .n { font-size:.88rem }
  .mb { display:block }
  .hd .l { display:none; position:absolute; right:18px; top:42px; flex-direction:column; gap:10px; background:var(--paper); border:1px solid var(--line); padding:14px 22px; z-index:9 }
  .site[data-area="arbeit"] .hd .l { background:var(--a-paper) }
  .hd.open .l { display:flex }
  .sub { padding:14px 18px 0; gap:6px 18px }
  main { padding:34px 18px 22px }
  .ft { padding-inline:18px }
  .doors { grid-template-columns:1fr; margin-inline:-18px; margin-bottom:-22px }
  .door { min-height:230px; padding:24px 18px }
  .door + .door { border-left:0; border-top:1px solid var(--line) }
  .door .mk { width:96px; height:128px; right:16px; bottom:12px }
  .mk { width:92px; height:116px }
  .page > .mk:not(.sm) { display:none }
  .mk.sm { width:52px; height:66px }
  .page { gap:24px }
}

.row h2{margin:0;font-family:var(--f-title);font-weight:400;font-size:1.3rem}.row:hover h2{text-decoration:underline;text-decoration-thickness:1px;text-underline-offset:5px}.fmt h2{margin:0;font-family:var(--f-title);font-weight:400;font-size:1.3rem}.folder h2{margin:0;font-family:var(--f-title);font-weight:400;font-size:1.25rem}
.vh1{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
.vh{font-size:1.5rem;margin-top:1.6em;margin-bottom:.2em}.vq{margin:1.4em 0;padding-left:1.1em;border-left:1px solid var(--line);font-style:italic}.vq p{margin:0}.vs{margin-top:2em;color:var(--mute);font-size:.88rem}
.legal h2{font-size:1.3rem;margin-top:1.8em}.legal h3{font-size:1.05rem;margin-top:1.4em;font-family:var(--f-title);font-weight:400}.legal p{margin:.7em 0}
.skip{position:absolute;left:-9999px;top:8px;background:var(--paper);color:var(--ink);padding:8px 14px;border:1px solid var(--ink);z-index:100}.skip:focus{left:16px}
a:focus-visible,button:focus-visible{outline:2px solid var(--clay);outline-offset:3px}