:root{
  --sumi:#1A1A18;
  --washi:#F7F5F0;
  --grau:#8C8880;
  --shu:#C1402A;
  --linie:rgba(26,26,24,.16);
  --rand:clamp(1.5rem,6vw,6rem);
  --spalte:38%;
}

*{box-sizing:border-box}

html{
  -webkit-text-size-adjust:100%;
  scroll-behavior:smooth;
}

body{
  margin:0;
  background:var(--washi);
  color:var(--sumi);
  font-family:"Inter",-apple-system,BlinkMacSystemFont,"Helvetica Neue",sans-serif;
  font-weight:300;
  font-size:1rem;
  line-height:1.85;
  -webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility;
}

a{color:inherit;text-decoration:none;border-bottom:1px solid var(--linie);transition:border-color .25s,color .25s}
a:hover{color:var(--shu);border-bottom-color:var(--shu)}
:focus-visible{outline:1px solid var(--shu);outline-offset:4px}

.skip{position:absolute;left:-9999px;top:0;background:var(--sumi);color:var(--washi);padding:.6rem 1rem;border:0}
.skip:focus{left:0;z-index:10}

/* Kopf */
.kopf{padding:var(--rand) var(--rand) 0}
.marke{display:inline-flex;align-items:center;gap:.75rem;border:0}
.marke:hover{color:inherit}
.enso{width:34px;height:34px;color:var(--sumi);flex:none}
.markenschrift{
  font-family:"Zen Old Mincho",Georgia,serif;
  font-weight:400;
  font-size:1rem;
  letter-spacing:.14em;
}

/* Schwerpunkt */
.schwerpunkt{
  padding:clamp(6rem,22vh,15rem) var(--rand) clamp(7rem,20vh,14rem);
  max-width:78ch;
  margin-left:0;
}
.leitsatz{
  font-family:"Zen Old Mincho",Georgia,serif;
  font-weight:400;
  font-size:clamp(1.6rem,3.6vw,2.9rem);
  line-height:1.5;
  letter-spacing:.005em;
  margin:0 0 2.5rem;
  max-width:22ch;
}
.einordnung{
  margin:0;
  color:var(--grau);
  font-size:clamp(.95rem,1.4vw,1.05rem);
  max-width:44ch;
}

/* Abschnitte */
main section + section{border-top:1px solid var(--linie)}

.felder,.methode,.netzwerk,.kontakt{
  padding:clamp(4rem,10vh,7rem) var(--rand);
  display:grid;
  grid-template-columns:var(--spalte) 1fr;
  gap:0 clamp(2rem,5vw,5rem);
  align-items:start;
}

.abschnitt{
  grid-column:1;
  grid-row:1;
  margin:0;
  font-family:"Zen Old Mincho",Georgia,serif;
  font-weight:400;
  font-size:1.05rem;
  letter-spacing:.16em;
  color:var(--grau);
  position:sticky;
  top:clamp(1.5rem,6vw,4rem);
}

.feld,.methodentext,.netzwerktext,.kontaktraster{grid-column:2}
.feld:first-of-type{grid-row:1}

.feld{max-width:64ch;padding-bottom:3rem;margin-bottom:3rem;border-bottom:1px solid var(--linie)}
.feld:last-child{padding-bottom:0;margin-bottom:0;border-bottom:0}
.feld h3{
  font-family:"Zen Old Mincho",Georgia,serif;
  font-weight:500;
  font-size:1.35rem;
  letter-spacing:.02em;
  margin:0 0 1rem;
}
.feld p{margin:0}

.methodentext,.netzwerktext{max-width:64ch}
.methodentext p,.netzwerktext p{margin:0 0 1.6rem}
.methodentext p:last-child,.netzwerktext p:last-child{margin-bottom:0}
.hervor{
  font-family:"Zen Old Mincho",Georgia,serif;
  font-size:1.5rem;
  line-height:1.6;
  margin-bottom:1.8rem !important;
}
.signatur{color:var(--grau)}

.schritt{
  font-family:"Zen Old Mincho",Georgia,serif;
  font-weight:500;
  font-size:1.15rem;
  letter-spacing:.02em;
  line-height:1.5;
  margin:2.6rem 0 .7rem;
}
.schritt + p{margin-bottom:0}
.methodentext p + .schritt{margin-top:2.6rem}

/* Kontakt */
.kontaktraster{display:grid;grid-template-columns:1fr;gap:3.5rem;max-width:64ch;width:100%}
.direkt p{margin:0 0 .6rem}
.direkt a{border-bottom-color:var(--shu)}
.ort{color:var(--grau)}

.formular{display:block;max-width:46ch}
.zeile{margin-bottom:1.6rem}
label{display:block;font-size:.8rem;letter-spacing:.1em;color:var(--grau);margin-bottom:.5rem}
input[type=text],input[type=email],textarea{
  width:100%;
  background:transparent;
  border:0;
  border-bottom:1px solid var(--linie);
  padding:.5rem 0;
  font-family:inherit;
  font-size:1rem;
  font-weight:300;
  color:var(--sumi);
  border-radius:0;
  transition:border-color .25s;
}
input[type=text]:focus,input[type=email]:focus,textarea:focus{
  border-bottom-color:var(--shu);
  outline:none;
}
textarea{resize:vertical;line-height:1.7}

.honig{position:absolute;left:-9999px;width:1px;height:1px;overflow:hidden}

.zustimmung{display:flex;gap:.75rem;align-items:flex-start;margin:2.2rem 0}
.zustimmung input{margin-top:.45rem;accent-color:var(--shu);flex:none}
.zustimmung label{font-size:.82rem;letter-spacing:0;line-height:1.7;color:var(--grau);margin:0}

button{
  background:transparent;
  border:1px solid var(--sumi);
  color:var(--sumi);
  font-family:"Zen Old Mincho",Georgia,serif;
  font-size:.95rem;
  letter-spacing:.1em;
  padding:.85rem 2.2rem;
  border-radius:0;
  cursor:pointer;
  transition:background .25s,color .25s;
}
button:hover{background:var(--sumi);color:var(--washi)}

/* Fuss */
.fuss{
  padding:2.5rem var(--rand) 3.5rem;
  border-top:1px solid var(--linie);
  display:flex;
  justify-content:space-between;
  align-items:baseline;
  gap:1.5rem;
  flex-wrap:wrap;
  font-size:.82rem;
  color:var(--grau);
}
.fuss p{margin:0}
.fuss a{margin-right:1.5rem;border-bottom:0}
.klein{letter-spacing:.06em}

/* Bestaetigungsseite */
.meldung{padding:clamp(6rem,20vh,12rem) var(--rand);max-width:56ch}
.meldung h1{
  font-family:"Zen Old Mincho",Georgia,serif;
  font-weight:400;
  font-size:clamp(1.5rem,3vw,2.2rem);
  line-height:1.5;
  margin:0 0 1.5rem;
}
.meldung p{margin:0 0 1.5rem;color:var(--grau)}

/* Rechtstexte */
.rechtstext{padding:clamp(4rem,12vh,8rem) var(--rand);max-width:70ch}
.rechtstext h1{
  font-family:"Zen Old Mincho",Georgia,serif;
  font-weight:400;
  font-size:clamp(1.5rem,3vw,2rem);
  margin:0 0 2.5rem;
}
.rechtstext h2{
  font-family:"Zen Old Mincho",Georgia,serif;
  font-weight:500;
  font-size:1.1rem;
  margin:2.5rem 0 .8rem;
}
.rechtstext p{margin:0 0 1.2rem}

@media (max-width:760px){
  :root{--spalte:1fr}
  .felder,.methode,.netzwerk,.kontakt{grid-template-columns:1fr;gap:0}
  .abschnitt{position:static;grid-column:1;margin-bottom:2.5rem}
  .feld,.methodentext,.netzwerktext,.kontaktraster{grid-column:1}
  .feld:first-of-type{grid-row:auto}
  .schwerpunkt{padding-top:clamp(4rem,14vh,8rem)}
  .leitsatz{max-width:none}
}

@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  *{transition:none !important}
}