:root{--text:#111;--grau:#767676;--linie:#e4e4e4;--flaeche:#f4f4f4;--rand:24px}
*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{margin:0;background:#fff;color:var(--text);font:16px/1.5 "Helvetica Neue",Helvetica,Arial,system-ui,sans-serif}
a{color:inherit;text-decoration:none}
a:hover{text-decoration:underline;text-underline-offset:3px}
img{display:block;max-width:100%}

/* Kopf */
.kopf{display:flex;flex-wrap:wrap;align-items:baseline;justify-content:space-between;gap:12px 32px;padding:28px var(--rand) 0}
.name{font-size:32px;line-height:1.1;letter-spacing:-.01em;font-weight:400}
.name:hover{text-decoration:none}
.nav{display:flex;flex-wrap:wrap;gap:6px 22px;font-size:13px;letter-spacing:.04em;text-transform:uppercase}
.nav a[aria-current="page"]{text-decoration:underline;text-underline-offset:5px}

/* Werke: Filter + Raster */
.leiste{display:flex;flex-wrap:wrap;align-items:center;gap:8px 18px;padding:44px var(--rand) 22px}
.filter{display:flex;flex-wrap:wrap;gap:6px 16px;font-size:11.5px;letter-spacing:.04em;text-transform:uppercase}
.filter button{background:none;border:0;padding:0;font:inherit;letter-spacing:inherit;text-transform:inherit;cursor:pointer;color:var(--text)}
.filter button:hover,.filter button[aria-pressed="true"]{text-decoration:underline;text-underline-offset:4px}
.suche{margin-left:auto;border:0;border-bottom:1px solid var(--linie);padding:3px 0;font:inherit;font-size:13px;width:180px;background:transparent}
.suche:focus{outline:none;border-bottom-color:var(--text)}
.raster{display:grid;grid-template-columns:repeat(auto-fill,minmax(220px,1fr));gap:28px 20px;padding:0 var(--rand) 60px}
.werk{display:block}
.werk:hover{text-decoration:none}
.werk .bild{display:block;aspect-ratio:1/1;background:var(--flaeche);overflow:hidden}
.werk img{width:100%;height:100%;object-fit:cover;transition:opacity .2s}
.werk:hover img{opacity:.88}
.werk .unterschrift{display:block;margin-top:8px;font-size:12.5px;line-height:1.35;color:var(--grau)}
.werk .unterschrift b{font-weight:400;color:var(--text)}
.leer{padding:40px var(--rand);color:var(--grau)}

/* Großansicht */
.gross{position:fixed;inset:0;z-index:20;background:#fff;display:grid;grid-template-columns:minmax(0,1fr) 320px;grid-template-rows:auto minmax(0,1fr)}
.gross[hidden]{display:none}
.gross-kopf{grid-column:1/-1;display:flex;justify-content:flex-end;gap:18px;padding:18px var(--rand) 0;font-size:13px;letter-spacing:.04em;text-transform:uppercase}
.gross-kopf button{background:none;border:0;padding:0;font:inherit;letter-spacing:inherit;text-transform:inherit;cursor:pointer}
.gross-kopf button:hover{text-decoration:underline;text-underline-offset:4px}
.gross-bild{position:relative;display:grid;place-items:center;min-height:0;min-width:0;padding:16px var(--rand) 24px}
.gross-bild img{max-width:100%;max-height:calc(100vh - 110px);object-fit:contain}
.gross-text{padding:16px var(--rand) 24px 0;overflow-y:auto;font-size:14px;line-height:1.5}
.gross-text h2{font-size:18px;font-weight:400;margin:0 0 2px}
.gross-text p{margin:0}
.gross-text .grau{color:var(--grau)}
.gross-text .abstand{margin-top:14px}
.ansichten{display:flex;flex-wrap:wrap;gap:8px;margin-top:20px}
.ansichten button{padding:0;border:1px solid transparent;background:var(--flaeche);width:64px;height:64px;cursor:pointer}
.ansichten button[aria-current="true"]{border-color:var(--text)}
.ansichten img{width:100%;height:100%;object-fit:cover}

/* Textseiten */
.text{max-width:760px;padding:44px var(--rand) 60px}
.text h1{font-size:13px;font-weight:400;letter-spacing:.04em;text-transform:uppercase;margin:0 0 28px}
.text h2{font-size:16px;font-weight:600;margin:28px 0 6px}
.text p,.text li{margin:0 0 10px}
.text ul{padding-left:18px}
.cv{display:grid;grid-template-columns:90px 1fr;gap:4px 16px;margin:0 0 10px}
.cv dt{color:var(--grau)}
.cv dd{margin:0}
.cv dd p{margin:0 0 5px}
.vita h2{margin-top:44px;margin-bottom:12px}
.vita .cv{grid-template-columns:100px 1fr;gap:6px 18px;font-size:15px}
.liste{list-style:none;padding:0}
.liste li{margin:0 0 5px}
.klein{font-size:13px;color:var(--grau)}
@media (max-width:760px){.vita .cv{grid-template-columns:78px 1fr;font-size:14px}}
[data-fehlt]{background:#fff3b0;outline:1px dashed #c9a400}

.fuss{display:flex;flex-wrap:wrap;gap:6px 22px;padding:24px var(--rand) 36px;border-top:1px solid var(--linie);font-size:12px;color:var(--grau);letter-spacing:.03em}

@media (max-width:760px){
  :root{--rand:16px}
  .name{font-size:26px}
  .raster{grid-template-columns:repeat(2,minmax(0,1fr));gap:20px 12px}
  .suche{margin-left:0;width:100%}
  .gross{grid-template-columns:1fr;grid-template-rows:auto minmax(0,1fr) auto}
  .gross-bild img{max-height:60vh}
  .gross-text{padding:0 var(--rand) 24px;max-height:34vh}
}