:root{
  --paper:#f1ebdd;
  --paper-2:#e6dcc6;
  --ink:#2b2418;
  --ink-soft:#5b5140;
  --rust:#a3391f;
  --wood:#8a6a3b;
  --line:#cfc3a8;
}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{
  margin:0;
  background:var(--paper);
  color:var(--ink);
  font:18px/1.65 Georgia,"Iowan Old Style","Palatino Linotype",serif;
}
img{display:block;width:100%;height:auto}
a{color:var(--rust)}
h1,h2,h3{font-weight:700;line-height:1.1;margin:0 0 .5em;letter-spacing:-.01em}
h1{font-size:clamp(2.6rem,7vw,5rem)}
h1 em{font-style:italic;color:var(--rust)}
h2{font-size:clamp(1.8rem,4vw,2.6rem)}
h3{font-size:1.15rem;margin-bottom:.2em}
p{margin:0 0 1em}

.top{
  display:flex;justify-content:space-between;align-items:baseline;
  padding:1.2rem clamp(1rem,5vw,4rem);
  border-bottom:2px solid var(--ink);
}
.mark{font-weight:700;font-size:1.3rem;color:var(--ink);text-decoration:none;letter-spacing:.04em;text-transform:uppercase}
.top nav{display:flex;gap:1.5rem;font:15px/1 ui-monospace,Menlo,Consolas,monospace}
.top nav a{color:var(--ink);text-decoration:none;border-bottom:1px solid transparent}
.top nav a:hover{border-color:var(--rust)}

main>section{padding:clamp(3rem,8vw,6rem) clamp(1rem,5vw,4rem)}

.hero{
  display:grid;gap:3rem;align-items:center;
  grid-template-columns:1.1fr 1fr;
}
.kicker{font:14px/1.4 ui-monospace,Menlo,Consolas,monospace;text-transform:uppercase;letter-spacing:.1em;color:var(--ink-soft)}
.lead{font-size:1.25rem;max-width:34em}
.btn{
  display:inline-block;padding:.8em 1.4em;background:var(--ink);color:var(--paper);
  text-decoration:none;font:15px/1 ui-monospace,Menlo,Consolas,monospace;
  box-shadow:5px 5px 0 var(--rust);transition:transform .15s,box-shadow .15s;
}
.btn:hover{transform:translate(2px,2px);box-shadow:3px 3px 0 var(--rust)}
figure{margin:0}
figcaption{font:13px/1.4 ui-monospace,Menlo,Consolas,monospace;color:var(--ink-soft);margin-top:.6rem}
.hero-img img{border:2px solid var(--ink);transform:rotate(1.2deg);box-shadow:8px 8px 0 var(--paper-2)}

.strip{padding:0!important;background:var(--ink);color:var(--paper)}
.strip ul{list-style:none;margin:0;padding:1.2rem clamp(1rem,5vw,4rem);display:flex;flex-wrap:wrap;gap:.8rem 3rem;justify-content:space-between;font:15px/1.3 ui-monospace,Menlo,Consolas,monospace}
.strip b{color:#e9b46a;font-size:1.3em;margin-right:.3em}

.prinzip{display:grid;gap:4rem;grid-template-columns:1fr 1fr;align-items:center}
.col-fig{background:var(--paper-2);border:2px solid var(--ink);padding:1.5rem}
.col-fig svg{width:100%;height:auto;display:block}
.note{
  font:14px/1.5 ui-monospace,Menlo,Consolas,monospace;color:var(--ink-soft);
  border-left:3px solid var(--rust);padding-left:.8rem;
}
.note-inline{font-family:ui-monospace,Menlo,Consolas,monospace;font-size:.9em}

.reibung{background:var(--paper-2);border-block:2px solid var(--ink)}
.reibung ol{list-style:none;margin:2rem 0 0;padding:0;display:grid;grid-template-columns:repeat(3,1fr);gap:2.5rem}
.reibung li{display:flex;gap:1rem}
.n{
  flex:none;width:2.4rem;height:2.4rem;border:2px solid var(--ink);border-radius:50%;
  display:grid;place-items:center;font:700 1.1rem ui-monospace,Menlo,Consolas,monospace;
}

.gallery{
  display:grid;gap:2rem;margin-top:2rem;
  grid-template-columns:repeat(6,1fr);
}
.g1{grid-column:1/5}
.g2{grid-column:5/7;align-self:end}
.g3{grid-column:1/3;align-self:start}
.g4{grid-column:3/7}
.gallery img{border:2px solid var(--ink)}
.g2 img{transform:rotate(-1.5deg)}
.g3 img{transform:rotate(1deg)}

.opa{display:grid;grid-template-columns:.8fr 1.2fr;gap:4rem;align-items:start;border-top:2px solid var(--ink)}
.opa>figure img{border:2px solid var(--ink)}
.sketch{margin-top:2rem;max-width:26rem}
.sketch img{border:1px dashed var(--ink-soft)}

.kontakt{text-align:center;background:var(--ink);color:var(--paper)}
.kontakt .mail{font-size:1.5rem}
.kontakt a{color:#e9b46a}

footer{padding:1.5rem clamp(1rem,5vw,4rem);font:13px/1.4 ui-monospace,Menlo,Consolas,monospace;color:var(--ink-soft)}

@media (max-width:820px){
  .hero,.prinzip,.opa{grid-template-columns:1fr}
  .reibung ol{grid-template-columns:1fr}
  .gallery{grid-template-columns:1fr}
  .gallery figure{grid-column:auto!important}
  .top nav{display:none}
}