/* Lokale Schriften — keine externen Server (Datenschutz) */
/* IBM Plex Mono 400 normal latin-ext */
@font-face {
  font-family: 'IBM Plex Mono';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url('fonts/IBMPlexMono-400-latin-ext.woff2') format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
/* IBM Plex Mono 400 normal latin */
@font-face {
  font-family: 'IBM Plex Mono';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url('fonts/IBMPlexMono-400-latin.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
/* IBM Plex Mono 500 normal latin-ext */
@font-face {
  font-family: 'IBM Plex Mono';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url('fonts/IBMPlexMono-500-latin-ext.woff2') format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
/* IBM Plex Mono 500 normal latin */
@font-face {
  font-family: 'IBM Plex Mono';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url('fonts/IBMPlexMono-500-latin.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
/* Spectral 300 italic latin-ext */
@font-face {
  font-family: 'Spectral';
  font-style: italic;
  font-weight: 300;
  font-display: swap;
  src: url('fonts/Spectral-300i-latin-ext.woff2') format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
/* Spectral 300 italic latin */
@font-face {
  font-family: 'Spectral';
  font-style: italic;
  font-weight: 300;
  font-display: swap;
  src: url('fonts/Spectral-300i-latin.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
/* Spectral 300 normal latin-ext */
@font-face {
  font-family: 'Spectral';
  font-style: normal;
  font-weight: 300;
  font-display: swap;
  src: url('fonts/Spectral-300-latin-ext.woff2') format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
/* Spectral 300 normal latin */
@font-face {
  font-family: 'Spectral';
  font-style: normal;
  font-weight: 300;
  font-display: swap;
  src: url('fonts/Spectral-300-latin.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
/* Spectral 400 normal latin-ext */
@font-face {
  font-family: 'Spectral';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url('fonts/Spectral-400-latin-ext.woff2') format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
/* Spectral 400 normal latin */
@font-face {
  font-family: 'Spectral';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url('fonts/Spectral-400-latin.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
/* Spectral 600 normal latin-ext */
@font-face {
  font-family: 'Spectral';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url('fonts/Spectral-600-latin-ext.woff2') format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
/* Spectral 600 normal latin */
@font-face {
  font-family: 'Spectral';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url('fonts/Spectral-600-latin.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
/* Gestaltungssystem Herbert Rauch — Referenz: DESIGN.md */

:root{
  --papier:#F7F6F3;
  --blatt:#FFFFFF;
  --leinen:#E4E1D9;
  --tinte:#1C1B19;
  --sekundaer:#63605A;
  --linie:#CBC7BD;
  --stift:#A8352A;

  --s1:.5rem; --s2:1rem; --s3:1.6rem; --s4:2.6rem;
  --s5:clamp(3rem,7vw,5.5rem); --s6:clamp(4.5rem,11vw,9rem);
  --mass:clamp(1rem,.62rem+1.35vw,1.32rem);
}
*{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-family:"Spectral",Palatino,"Palatino Linotype",Georgia,serif;
  font-size:var(--mass);font-weight:300;line-height:1.64;
  text-rendering:optimizeLegibility;padding-bottom:3rem;
}
.wrap{max-width:66rem;margin:0 auto;padding:0 clamp(1.25rem,5vw,4rem)}
.schmal{max-width:37rem}
.mono{font-family:"IBM Plex Mono",ui-monospace,Menlo,monospace}
.etikett{font-family:"IBM Plex Mono",monospace;font-size:.7rem;letter-spacing:.16em;
  text-transform:uppercase;color:var(--sekundaer)}
a{color:var(--stift)}
:focus-visible{outline:2px solid var(--stift);outline-offset:3px}

/* Kopf */
.marke{display:flex;justify-content:space-between;align-items:baseline;gap:2rem;flex-wrap:wrap;
  padding:var(--s3) 0 var(--s2);border-bottom:1px solid var(--linie)}
.marke b{font-family:"IBM Plex Mono",monospace;font-weight:500;font-size:.78rem;
  letter-spacing:.18em;text-transform:uppercase}
.marke b a{color:inherit;text-decoration:none}
.marke b a:hover,.marke b a:focus-visible{color:var(--stift)}
nav ul{list-style:none;display:flex;gap:clamp(.9rem,2.4vw,1.9rem);margin:0;padding:0;flex-wrap:wrap}
nav a{font-family:"IBM Plex Mono",monospace;font-size:.7rem;letter-spacing:.1em;
  text-transform:uppercase;color:var(--sekundaer);text-decoration:none;
  padding:.3rem 0;border-bottom:1px solid transparent}
nav a:hover,nav a:focus-visible{color:var(--tinte);border-bottom-color:var(--stift)}
nav a[aria-current="page"]{color:var(--tinte);border-bottom-color:var(--linie)}

/* Auftakt mit Porträt */
.auftakt-portraet{display:grid;grid-template-columns:repeat(auto-fit,minmax(18rem,1fr));
  gap:clamp(2rem,5vw,4rem);align-items:center;padding:var(--s5) 0}
.auftakt-portraet h1{font-size:clamp(2.7rem,8vw,5.4rem);font-weight:300;line-height:1.02;margin:0;
  letter-spacing:-.018em}
.auftakt-portraet h1 em{font-style:italic;display:block}
.auftakt-portraet .lead{margin:var(--s4) 0 0;max-width:33rem;color:#3A3934}
.blatt img{display:block;width:100%;height:auto}

/* Freigestelltes Werkbild — der schwarze Abzugsrand des Originals ist der Rahmen */
figure.frei{margin:0 auto;max-width:47rem;padding:0;border:0;background:none}
figure.frei img{display:block;width:100%;height:auto}
figure.frei figcaption{margin-top:var(--s2)}

/* Mappe — die fünf Blätter einer Edition nebeneinander */
.mappe{display:grid;grid-template-columns:repeat(auto-fit,minmax(16rem,1fr));
  gap:var(--s5) var(--s4);margin-top:var(--s5);align-items:start}
.mappe figure.frei{max-width:none}
.mappe figcaption{font-size:.66rem}
.mappe figcaption b{letter-spacing:.16em}

/* Langer Lesetext (Vorwort) */
.lesetext{max-width:37rem}
.lesetext p{margin:0 0 var(--s3)}
figure.blatt.bild-mittig{max-width:31rem;margin:var(--s5) auto}

/* Auftakt */
.auftakt{padding:var(--s6) 0 var(--s5);text-align:center}
.auftakt h1{font-size:clamp(2.7rem,8vw,5.4rem);font-weight:300;line-height:1.02;margin:0;
  letter-spacing:-.018em}
.auftakt h1 em{font-style:italic;display:block}
.auftakt .etikett{margin-top:var(--s3)}
.auftakt p{margin:var(--s4) auto 0;max-width:33rem;color:#3A3934}

/* Blatt mit Passepartout */
figure.blatt{margin:0 auto;max-width:47rem;background:var(--blatt);border:1px solid var(--linie);
  padding:clamp(2rem,5vw,4.5rem) clamp(2rem,5vw,4.5rem) clamp(1.3rem,3vw,2rem);position:relative}
figure.blatt::after{content:"HR";position:absolute;
  right:clamp(2rem,5vw,4.5rem);bottom:clamp(1.3rem,3vw,2rem);
  font-family:"IBM Plex Mono",monospace;font-size:.6rem;letter-spacing:.3em;color:#D6D2C8}
.platz{aspect-ratio:1/1;display:grid;place-items:center;
  background:repeating-linear-gradient(45deg,#DEDBD3 0 10px,#D8D5CC 10px 20px)}
.platz span{font-family:"IBM Plex Mono",monospace;font-size:.64rem;letter-spacing:.12em;
  text-transform:uppercase;color:#87847B;background:rgba(255,255,255,.85);padding:.45rem .75rem}
figcaption{margin-top:var(--s3);display:flex;justify-content:space-between;gap:var(--s2);
  flex-wrap:wrap;font-family:"IBM Plex Mono",monospace;font-size:.7rem;letter-spacing:.08em;
  color:var(--sekundaer)}
figcaption b{font-weight:500;color:var(--tinte)}
.strecke{display:grid;gap:var(--s5);padding:var(--s4) 0 var(--s5)}

/* Abschnitte */
section{padding:var(--s5) 0}
h2,h1.seitentitel{font-size:clamp(1.7rem,3.6vw,2.4rem);font-weight:300;line-height:1.18;
  margin:0 0 var(--s3);letter-spacing:-.012em}
.etikett+h1.seitentitel{margin-top:0}
.etikett+h2{margin-top:0}
section>.etikett{margin:0 0 var(--s3)}
.zwei{display:grid;grid-template-columns:repeat(auto-fit,minmax(18rem,1fr));
  gap:clamp(2rem,5vw,4rem);align-items:start}
.zitat{border-left:2px solid var(--stift);padding-left:var(--s3);font-style:italic;
  color:#34332E;margin:var(--s4) 0}
.zitat cite{display:block;font-style:normal;font-family:"IBM Plex Mono",monospace;
  font-size:.68rem;letter-spacing:.1em;color:var(--sekundaer);margin-top:var(--s2)}
hr.trenn{border:0;border-top:1px solid var(--linie);margin:0}

/* Offen-Platzhalter */
.offen{font-family:"IBM Plex Mono",monospace;font-size:.8rem;color:var(--sekundaer);
  background:var(--blatt);border:1px dashed var(--linie);padding:.6rem .9rem;display:inline-block}

/* Kontaktbogen — ruhig, ohne Streichungen */
.bogen-rahmen{background:var(--blatt);border:1px solid var(--linie);padding:clamp(1rem,3vw,1.8rem)}
.bogen{display:grid;grid-template-columns:repeat(6,1fr);gap:.45rem}
.feld{aspect-ratio:1/1;border:1px solid #E4E1D9;position:relative}
.feld.gewaehlt{border-color:var(--linie);
  background:repeating-linear-gradient(45deg,#DEDBD3 0 8px,#D8D5CC 8px 16px)}
.feld .nr{position:absolute;left:.22rem;bottom:.16rem;font-family:"IBM Plex Mono",monospace;
  font-size:.52rem;color:#A9A69D}
.bogen-fuss{margin:var(--s2) 0 0;font-family:"IBM Plex Mono",monospace;font-size:.68rem;
  color:var(--sekundaer);line-height:1.7}

/* Registratur */
table.reg{width:100%;border-collapse:collapse;margin-top:var(--s4);
  font-family:"IBM Plex Mono",monospace;font-size:.82rem}
table.reg th{text-align:left;font-weight:500;font-size:.66rem;letter-spacing:.14em;
  text-transform:uppercase;color:var(--sekundaer);border-bottom:1px solid var(--tinte);
  padding:0 var(--s2) .6rem 0}
table.reg td{padding:1rem var(--s2) 1rem 0;border-bottom:1px solid var(--linie);vertical-align:top}
table.reg td:last-child,table.reg th:last-child{text-align:right;padding-right:0;white-space:nowrap}
table.reg .name{font-family:"Spectral",Georgia,serif;font-size:1.05rem;font-weight:400}
.fussnote{font-family:"IBM Plex Mono",monospace;font-size:.68rem;color:var(--sekundaer);
  margin-top:var(--s2)}
@media (max-width:34rem){
  table.reg thead{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0)}
  table.reg tr{display:block;border-bottom:1px solid var(--linie);padding:1rem 0}
  table.reg td{display:block;border:0;padding:.15rem 0}
  table.reg td:last-child{text-align:left;padding-top:.5rem}
}

/* Anfrage */
.anfrage{background:var(--leinen);padding:var(--s5) 0;margin-top:var(--s5)}
.knopf{display:inline-block;margin-top:var(--s4);font-family:"IBM Plex Mono",monospace;
  font-size:.74rem;letter-spacing:.14em;text-transform:uppercase;color:var(--papier);
  background:var(--stift);padding:1rem 2.2rem;text-decoration:none;border:1px solid var(--stift)}
.knopf:hover,.knopf:focus-visible{background:transparent;color:var(--stift)}

/* Formular (Anfrage) */
.formular{margin-top:var(--s4);display:grid;gap:var(--s3);text-align:left}
.feld-gruppe{display:grid;gap:.5rem}
.formular label{font-family:"IBM Plex Mono",monospace;font-size:.7rem;letter-spacing:.14em;
  text-transform:uppercase;color:var(--tinte)}
.formular .pflicht{color:var(--stift)}
.formular input,.formular select,.formular textarea{
  font-family:"IBM Plex Mono",ui-monospace,Menlo,monospace;font-size:.9rem;color:var(--tinte);
  background:var(--blatt);border:1px solid var(--linie);border-radius:0;
  padding:.85rem .9rem;width:100%;box-sizing:border-box}
.formular textarea{min-height:11rem;resize:vertical}
.formular select{appearance:none;-webkit-appearance:none;
  background-image:linear-gradient(45deg,transparent 49%,var(--sekundaer) 50%),
    linear-gradient(135deg,var(--sekundaer) 50%,transparent 51%);
  background-position:calc(100% - 1.3rem) 50%,calc(100% - 1rem) 50%;
  background-size:.3rem .3rem;background-repeat:no-repeat;padding-right:2.6rem}
.formular button.knopf{margin-top:var(--s2);cursor:pointer;width:auto;justify-self:start}
.formular-fuss{font-family:"IBM Plex Mono",monospace;font-size:.68rem;color:var(--sekundaer);margin:0}

footer{padding:var(--s5) 0 var(--s4);border-top:1px solid var(--linie);
  font-family:"IBM Plex Mono",monospace;font-size:.7rem;color:var(--sekundaer)}
footer ul{list-style:none;display:flex;gap:var(--s3);padding:0;margin:0 0 var(--s2);flex-wrap:wrap}
footer a{color:var(--sekundaer);text-decoration:none;border-bottom:1px solid transparent}
footer a:hover,footer a:focus-visible{color:var(--tinte);border-bottom-color:var(--stift)}