/* schroedermartin.de. Werkverzeichnis auf weißem Papier (DESIGN.md): IBM Plex Mono, Tinte auf Weiß, Bilder ohne Rahmen. */
@font-face { font-family: "Plex Mono"; src: url(/assets/fonts/plexmono-400.woff2) format("woff2"); font-weight: 400; font-style: normal; font-display: swap; }
@font-face { font-family: "Plex Mono"; src: url(/assets/fonts/plexmono-500.woff2) format("woff2"); font-weight: 500; font-style: normal; font-display: swap; }

:root {
  --papier: #ffffff; --tinte: #111111; --grau: #666666; --hell: #f1f1f1; --linie: #cfcfcf;
  --mono: "Plex Mono", ui-monospace, "SF Mono", "Courier New", monospace;
  --s1: 4px; --s2: 8px; --s3: 16px; --s4: 24px; --s5: 40px; --s6: 64px; --s7: 104px;
  --rand: 16px; --zeile: 140px; --menue: 240px;
}
* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }
body { margin: 0; background: var(--papier); color: var(--tinte); font: 400 15px/1.7 var(--mono); font-variant-ligatures: none; -webkit-font-smoothing: antialiased; }
img { display: block; max-width: 100%; height: auto; }
a { color: var(--tinte); text-decoration-thickness: 1px; text-underline-offset: 3px; }
a:hover { text-decoration-thickness: 2px; }
:focus-visible { outline: 2px solid var(--tinte); outline-offset: 3px; }
.sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.skip { position: absolute; left: var(--s3); top: -80px; background: var(--tinte); color: var(--papier); padding: var(--s2) var(--s3); z-index: 100; }
.skip:focus { top: var(--s3); }
h1, h2, h3, p, ul, ol, figure { margin: 0; }

/* Kopf und Menü: mobil oben, ab 1000 px links, wie auf der alten Seite */
.hinweisleiste { background: var(--tinte); color: var(--papier); padding: var(--s2) var(--rand); font-size: 13px; text-align: center; }
.hinweisleiste a { color: var(--papier); }
.kopf { padding: var(--s4) var(--rand) var(--s3); }
.marke { text-decoration: none; display: inline-block; }
.marke h1, .marke p { font-size: 14px; font-weight: 500; letter-spacing: .01em; line-height: 1.4; }
.nav ul { list-style: none; padding: 0; display: flex; flex-wrap: wrap; gap: 0 var(--s4); margin-top: var(--s3); }
.nav ul + ul { margin-top: 0; }
.nav a { display: inline-block; padding: var(--s1) 0; font-size: 12.5px; letter-spacing: .08em; text-transform: uppercase; color: var(--grau); text-decoration: none; }
.nav a:hover { color: var(--tinte); }
.nav a[aria-current] { color: var(--tinte); text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 6px; }
@media (max-width: 999px) { .nav ul { gap: 0 var(--s3); } .nav a { padding: var(--s2) 0; font-size: 12px; letter-spacing: .04em; } }

main { padding: 0 var(--rand) var(--s6); min-height: 60vh; }
.seite { max-width: 1120px; }
.fuss { padding: var(--s5) var(--rand) var(--s6); }
.fuss ul { list-style: none; padding: 0; display: flex; flex-wrap: wrap; gap: 0 var(--s4); }
.fuss a { display: inline-block; padding: var(--s2) 0; font-size: 12.5px; color: var(--grau); text-decoration: none; letter-spacing: .02em; }
.fuss a:hover { color: var(--tinte); text-decoration: underline; }

@media (min-width: 1000px) {
  body { display: grid; grid-template-columns: var(--menue) minmax(0, 1fr); grid-template-areas: "kopf main" "kopf fuss"; grid-template-rows: 1fr auto; column-gap: var(--s5); padding-left: var(--s5); min-height: 100vh; }
  .hinweisleiste { grid-column: 1 / -1; margin-left: calc(var(--s5) * -1); }
  .skip { position: absolute; }
  .kopf { grid-area: kopf; position: sticky; top: 0; align-self: start; padding: var(--s6) 0 var(--s5); }
  main { grid-area: main; padding: var(--s6) var(--s5) var(--s6) 0; }
  .fuss { grid-area: fuss; padding: 0 var(--s5) var(--s6) 0; }
  .nav ul { flex-direction: column; gap: 0; margin-top: var(--s5); }
  .nav ul + ul { margin-top: var(--s4); }
  .nav a { padding: 6px 0; }
}

/* Kopfbild (nur 729 x 310 px vorhanden, wird nie größer gezeigt) */
.kopfbild { max-width: 729px; margin-bottom: var(--s5); }
.kopfbild img { width: 100%; }

/* Übersicht der Arbeiten */
.index ol { list-style: none; padding: 0; display: grid; gap: 0; margin-bottom: var(--s7); max-width: 62ch; }
.index a { display: flex; gap: var(--s3); padding: var(--s2) 0; text-decoration: none; }
.index a:hover { text-decoration: underline; }
.nr { color: var(--grau); font-size: 12.5px; letter-spacing: .04em; font-variant-numeric: tabular-nums; flex: none; }

/* Arbeiten */
.werk { margin-bottom: var(--s7); scroll-margin-top: var(--s5); }
.werk header { display: flex; align-items: baseline; gap: var(--s3); margin-bottom: var(--s4); }
.werk h2 { font-size: 18px; font-weight: 500; line-height: 1.4; }
.ohne-titel { margin-bottom: var(--s6); }
.raster { list-style: none; padding: 0; display: flex; flex-wrap: wrap; gap: 6px; --h: var(--zeile); }
.raster li { flex: calc(var(--ar) * 100) 1 calc(var(--ar) * var(--h)); max-width: var(--w); min-width: 0; background: var(--hell); }
.raster::after { content: ""; flex: 10000 1 0; }
.raster .bild { display: block; cursor: zoom-in; }
.raster img { width: 100%; height: auto; }
@media (min-width: 640px) { .raster { gap: var(--s2); --h: 200px; } }
@media (min-width: 1000px) { .raster { --h: 250px; } }

/* Textseiten */
.text h1 { font-size: 18px; font-weight: 500; line-height: 1.4; margin-bottom: var(--s4); }
.lesen { max-width: 62ch; }
.lesen p + p, .lesen ul + p, .lesen p + ul { margin-top: var(--s3); }
.lesen h2 { font-size: 15px; font-weight: 500; margin-top: var(--s5); margin-bottom: var(--s2); line-height: 1.5; }
.lesen ul { padding-left: var(--s4); }
.lesen li + li { margin-top: var(--s1); }
.lesen sup { font-size: .7em; line-height: 0; }
.mit-portrait { display: grid; gap: var(--s4); align-items: start; }
.portrait { max-width: 520px; background: var(--hell); }
.portrait img { width: 100%; }
@media (min-width: 1000px) { .mit-portrait { grid-template-columns: 520px minmax(0, 1fr); gap: var(--s5); } }
.recht .lesen { max-width: 70ch; }
.smliste { list-style: none; padding: 0; }
.smliste a { display: inline-block; padding: var(--s1) 0; }

/* Formular */
.kontaktform { margin-top: var(--s5); max-width: 62ch; display: grid; gap: var(--s3); }
.feld label { display: block; font-size: 13px; color: var(--grau); margin-bottom: var(--s1); }
.feld input:not([type=checkbox]), .feld textarea { width: 100%; font: inherit; color: var(--tinte); background: var(--papier); border: 1px solid var(--linie); border-radius: 0; padding: 10px 12px; min-height: 44px; }
.feld input:not([type=checkbox]):hover, .feld textarea:hover { border-color: var(--grau); }
.feld input:focus-visible, .feld textarea:focus-visible { outline: 2px solid var(--tinte); outline-offset: 0; border-color: var(--tinte); }
.feld textarea { resize: vertical; }
.feld.ungueltig input, .feld.ungueltig textarea { border-color: var(--tinte); border-width: 2px; }
.feld.ungueltig label { color: var(--tinte); }
.zustimmung { display: flex; gap: var(--s2); align-items: flex-start; color: var(--grau); font-size: 13px; line-height: 1.6; cursor: pointer; }
.zustimmung input { width: 20px; height: 20px; margin: 1px 0 0; flex: none; accent-color: var(--tinte); }
.honig { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }
.knopf { font: 500 13px var(--mono); letter-spacing: .08em; text-transform: uppercase; background: var(--tinte); color: var(--papier); border: 1px solid var(--tinte); padding: 0 var(--s4); min-height: 48px; cursor: pointer; border-radius: 0; }
.knopf:hover { background: var(--papier); color: var(--tinte); }
.knopf:disabled { opacity: .5; cursor: default; }
.form-status { font-size: 13px; min-height: 1.7em; }
.form-status.fehler { color: var(--tinte); font-weight: 500; }
.formular-erfolg { padding: var(--s4) 0; outline: none; }

/* Lightbox */
.lb { position: fixed; inset: 0; z-index: 50; background: var(--papier); display: grid; grid-template-rows: auto minmax(0, 1fr) auto; }
.lb[hidden] { display: none; }
.lb-bild { display: flex; align-items: center; justify-content: center; min-height: 0; padding: 0 var(--rand); touch-action: pan-y; }
.lb-bild img { max-width: 100%; max-height: 100%; width: auto; height: auto; object-fit: contain; }
.lb-kopf, .lb-fuss { display: flex; align-items: center; justify-content: space-between; gap: var(--s3); padding: var(--s3) var(--rand); font-size: 12.5px; }
.lb-info { color: var(--grau); min-width: 0; }
.lb-info b { color: var(--tinte); font-weight: 500; }
.lb button, .lb a { font: inherit; font-size: 12.5px; letter-spacing: .08em; text-transform: uppercase; background: none; border: 0; color: var(--tinte); padding: var(--s2) var(--s3); min-height: 44px; cursor: pointer; text-decoration: none; }
.lb button:hover, .lb a:hover { text-decoration: underline; }
.lb-nav { display: flex; gap: var(--s2); }
body.lb-offen { overflow: hidden; }

@media print { .kopf .nav, .fuss, .lb { display: none; } }